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| 本 書 に つい て | | 


「 詳 解 HTML&CSS&JavaScript 辞 典 ] が 、 最 新 の 
仕様 と ブラ ウザ に 合わ せ て バー ジョ ン ア ッ プ し まし た ! 
コン テン ツ の 構造 を 示す 「HTML4.01」 、 表 示方 法 
を 設定 する 「CSS2」 、 イ ンタ ラク ティ ブ な 機能 を 追 
加 す る 「JavaScript1.5] の 3 つの 言語 か ら 、 よ く 
使う 機能 を わか りや すく 解説 し て いま す 。 基礎 知識 
や 各種 チャ ー ト 、 仕 様 を まとめ た リフ ァ レ ンス な ども 、 
ホー ムペ ー ジ 作成 の 強力 な 助っ人 に な る は ず で す 。 
各 ブ ラウ ザ の 対応 状況 よ 、 も は や デフ ァ ク ト ・ ス タン ダー 
ト と な っ た 「Internet Explorer」 を 始め と し て 、 新 し 
い ム ー ブ メ ント で ある 「Firefox」 「0pera」 や 、 根 強 
い 支 持 層 を 持つ 「Mozila」 「Netscape」 、 ま た Safari 
な どの Macintosh 環 境 も 含め て 、 最 新版 か ら 普及 
版 ま で フォ ロー し て いま す 。 
解説 で 使用 し た サン プル コー ド は サポ ー ト ペー ジ で 
配布 し て いま す の で 、 実 際 に 表示 させ た り 、 コ ピー& ペ ー 
スト で 使用 する こと も で きま す ! 





本 書 と 合わ せ て ご 利用 くだ さい 。 





詳 角 上 
HTML.CSS。 
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注意 

(1 ) 本 書 は 、 著 者 な ど が 独自 に 調査 し た 結果 を 出版 し た も の で す 。 

(8) 本 書 の 内 容 に 関し て 、 ご 不明 な 点 や 誤り 、 記 載 漏 れ な ど お 気づき の 点 が ご ざい 
まし た ら 、 出 版 元 まで 書面 に て ご 連絡 くだ さい 。 

(3) 本 書 の 内 容 に 関し て 運用 され た 結果 の 影響 に つい て は 、 上 記 (2) 項 に か か わら 
ず 、 著 者 お よび 出版 社 は 、 い っ さい の 責任 を 負い か ね ます の で 、 あ ら か じ め ご 
了承 くだ さい 。 

(④) 本 書 の プロ グラ ム を 含む お すべ て の 内 容 は 著作 権 法 上 の 保護 を 受け て いま す 。 著 
者 、 発 行者 な どの 書面 に よる 承諾 を 得 ず 、 無 断 で 複写 、 複 製 す る こと は 禁じ ら 
れ て いま す 。 


商標 
・ Microsoft、Windows、Microsoft Internet Explorer は 、Microsoft 
Corporation の 米国 、 お よび その 他 の 国 に お ける 商標 、 ま た は 登録 商標 で す 。 
・ Apple、Macintosh、Mac、Mac 0S、Safari は 、Apple Computer, Inc. 
の 米国 お よび その 他 の 国 に お ける 商標 、 ま た は 登録 商標 で す 。 
・ Mozilla、Firefox と 、 そ れ ぞ れ の ロゴ は 、Mozilla Foundation の 商標 で す 。 
・ Netscape、Netscape Navigator、Netscape Communicator は 、 米 国 
Netscape Communications 社 の 商標 で す 。 
・ Opera は 、Opera Software ASA の ノル ウェ ー お よび その 他 の 国 に お ける 商 
標 、 ま た は 登録 商標 で す 。 
・ JavaTM お よび すべ て の Java 関連 の 名 称 は 、Sun MicrosystemSs.inc. の 米 
国 お よび その 他 の 国 で の 商標 、 ま た は 登録 商標 で す 。 
・ その 他 、 ブ ラン ド 名 、 製 品名 、 お よび 会 社名 は 、 一 般 に 各 メ ー カ ー の 商標 、 ま 
た は 登録 商標 で す 。 
・ 本 書 の 中 で は 通称 、 ま た は その 他 の 名 称 で 表記 し て いる こと が あり ます の で 、 
ご 了承 くだ さい 。 

















は じ め に 


CSS1 の 仕様 が 勧告 と し て 公開 され た の は 1996 年 、HTML4.0 が 公開 され た の 
は 翌 1997 年 の こと で す 。 そ の 後 、CSS2 が 公開 され 、HTML は HTML4.01、 
XHTML1.0、 そ し て XHTML1.1 へ と 進化 し まし た 。 一 方 、 プ ラウ ザ も 次 々 と 改 
良 が 行わ れ 、 比 較 的 新しい バー ジョ ン で は 、 ス タイ ル シ ー ト も ほぼ 問題 な く 利 
用 で きる よう に な っ て いま す 。 現在 で は 、 標 準 的 な HTML と CSS の 仕様 に 基 づ 
いて 制作 すれ ば 、 異 な る プラ ウザ で も 同じ 表示 結果 を 得 ら れる よう な 状況 に 、 
ほぼ な っ て いる の で す 。 

本 書 は 、 将 来 的 に は XHTML に 移行 する こと も 見 据え た 上 で 、 標 準 的 な 仕様 
に 沿っ た ホー ムペ ー ジ を 制作 で きる よう な 内 容 と な っ て いま す 。 ま た 、 よ り 多 
く の 人 が 利用 で きる よう な ホー ムペ ー ジ に する た め の 、Web アク セ シ ビ リティ 
に 関す る ヒン ト も 多く 掲載 し まし た 。 本 書 が 、 よ り よ い ホ ー ム ペー ジ 制 作 の た 
め の 一 助 と な れ ば 幸い で す 。 


大 藤 幹 


JavaScript に 対応 し た 初め て の プラ ウザ 、Netscape Navigator2.0 が 発表 され て か 
ら 、 か れこ れ 10 年 近く た た ち ま す 。 当 時 、 サ イト を 構築 する 上 で JavaScript を 使 
うこ と は 、 な に か 特別 な 感じ が あり まし た が 、 今 で は 、 ご く 普 通 の こと と な っ て 
いま す 。 ま た 、JavaScript 自身 ち 、 こ こ 数 年 、 以 前 ほど 大 き な 仕 様 の 変更 は な く 、 
安定 し て いま す 。 

この よう な 状況 で 、 今 後 JavaScript に 必要 な こと は 、CSS2 や DOM を 始め と し 
た 、 仕 様 が 標準 化 さ れ て いる 技術 と の 連携 だ と 考え て いま す 。 現在 で は 、mtemet 
Explorer や Netscape Navigator だ け で な く 、Firefox、Safari と いっ た 、 ほ と ん どの 
ユー ザー が 使用 し て いる プラ ウザ が 、 上 記 の よう な 多く の 標準 化 され た 技術 に 対 
応 し て いま す 。 そ し て JavaScript は 、 標 準 化 され た 仕様 に 準拠 し た 記述 を 行う こ 
と に よっ て 、 こ れ ら の 技術 と 連携 を と る こと が 可能 で す 。 

今回 本 書 を まとめ る に あたり 、 今 まで 以上 に 、 標 準 化 さ れ た 技術 と の 連携 に 重 
点 を 置い て 、 改 定 作業 を 行う よう に 心がけ まし た 。 そ し て それ は 、 JavaScript を 
使っ て ウェ ブサ イト を 構築 する 上 で 、 大 き な 利 点 に な る は ず だ と 信じ て いま す 。 


半 場 方 人 





書式 

タグ や スク リプ ト の 書式 。 
青い 倖 体 文字 は 、 数 値 な ど 
の 値 を 設定 する 部 分 で す 。 
HTML パー ト ・CSS パー 
ト で は 、 下 の 表 で 値 の 解説 
を する 場合 が あめ り ます 。 


表示 例 の 解説 。 ブ ラウ ザ 名 
か 、 サ ンプ ブル の 動き を 表し 
て いま す 。 


サン プル ソー ス の ブラ ウザ 表 
示例 。 効果 が 一 目 瞭 然 で す 。 


解説 
使用 方 法 や 注意 点 な ど を 、 
文章 で わか りや すく 説明 し 
ます 。 





サン プル 
改変 可能 な ソー ス を 掲載 し 
て いま す 。 赤 文 字 ・ 青 文字 は 
「 書 式 」 に 対応 し て いる 部 分 
で す 。 サ ンプ ル は すべ て サ 
ポー トペ ー ジ に て 配布 いた 
し ます (た だ し 、 紙 面 の 部 合 
で 折り 返し や 改行 な ど が 異 
な っ て いる こと が あり ます )。 
【 一 】 は サン プル の 一 部 を 抜 
きき 出し て いる 場合 の 部 分 名 
か 、 フ ァイル が 複数 ある 場 
合 の ファ イル 名 で す 。 


ivy 本 書 の 使い 方 





本 書 の 使い 方 I 


タイ トル 
で きる こと ・ し た いこ と か ら 、 項 目 を 探す こと が で きま す 。 




























行間 を 設定 する 


line-height: 1.5 


人 の 宙 き は 生 の 読み や す 
に 昌和 


line-height: 180W 





に 財 加 し キ ず 。 侍 了 ぎ て も の すぎ 
す 。 行商 が 少 /2 い 電 合 は 行間 が 少 72 て も 
が い 入間 が 近い と 


の 全 さ は 章 の 縮 みや すさ に 動 導 し ます 、 す き て も た 
便 み に (79 ます 。 け 各 が 9 な い 坦 は 行間 が が 
語 み や で すく) 行 の 文字 数 が 多い 電 合 は 13 

な の ます 





line-height プロ パテ ィ は 、 行 の 高き を 設定 し ます 。 

を 付け な い で 数 値 だ け を 指定 し た 場合 は 、、 フ ォ ン ト サ イ ズ に (ke 
定 も る 、 フ ォ ン ト サ イ ズ に 対す る 割合 に な り ま す 。 

な っ て いま す の で 、 注 意 し て くだ さい , 


ET 昌 呈 ーーーーーーーーーーーー 一 
【css】 
#sample1 { 1tne-hetght: normal ] 
#sample2 {( 1ine-beght: 1.5 ] 
#sample3 { 11ne-height: 180$ } 
em [ 
co1or: #EE3300: 
background-color: #EEEEEE: 
font-sty1e: normal 





ス の 人 は 指 定 で き な い こと に 


) 


【HTML】 
<h1 > 行間 の 設定 </h1> 


<h2>1ine-height: <em>norma1</em></h2> 
<p 1d="pample1"> 


な い 場合 は 行間 が 少な く て も 比較 的 読み や すく 、1 行 の 文字 数 が 多い 場合 は 行間 が 狭い と か な り 読 
み に く く な り ま す 。 


<h2>11ne-heighti <em1.5</m</h2> 
<P 1d="aamp1e2"> 
行 の 高 さ は 文章 の 読み や すさ に 影響 し ます 。 夕 す ぎ て も 広 すぎ て も 読み に くく な り ま す 。 行 数 が 少 


の み に く く な り ま す 。 
</B> 

<h2>1ine-height: <em>180*</em></h2> 

<P id="aamp1e3"> 

行 の 高 さ は 文章 の 読み や すさ に 影響 し ます 。 狭 すぎ て も 広 すぎ て も 読み に くく な り ま す 。 行 数 が 少 


ゆみ にくく な り ま す 。 
</px> 







本 書 は 、 主 に 「Windows XP] 「Internet Explorer 6.0」 「Firefox ] .0」 の 日 本 語 版 で 、 動 
| 作 確認 と イメ ー ジ の 作成 を 行っ て お り ます 。 例外 の 場合 は 、 それ ぞ れ に 表記 し て あり ま | 
す 。 フ ォ ン ト な どの 表示 設定 は 、 イ ンス トール 直 後 の 状態 に な か っ て いま す が 、 紙 面 の 都 | 

合 に より 「 ス テー タス バー」 な どの 一 部 の ツー ル を 非 表 示 に し て あり ます 。 




























対応 ブラ ウザ 

サン プル を ブラ ウザ で 動作 
確認 し た 結果 を 表示 し て い 
ます 。 色 が 薄く な っ て いる 
も の は 「 一 部 未 対応 ]、 空 欄 
の も の は 「 未 対応 ] で す 。 詳 
細 は 「 解 説 ] を お 読み くだ 


さい 。 













行 の 高 さ は 文章 の 読み や すさ に 影響 し ます 。 狭 すぎ て も 広 すぎ て も 読み に くく な り ま す 。 6ym ] 


紙面 の 都合 で 折り 返し て い 
る こと を 表し て いま す 。 


な い 場 合 は 行間 が 少な く て も 比較 89 読 みや すく. 1 行 の 文字 数 が 多い 場合 は 行 賠 が 狭い と 9y 還 | 


な い 場合 は 行間 が 少な く て も 比較 的 読み や すぐ 、+ 行 の 文字 数 が 多い 場合 は 行 周 が 狭い と か な m | 





リン ク 

文法 的 に 関連 が ある 部 分 や 、 
応用 する 場合 に 必要 と な る 
箇所 を 参照 する こと が で き 
ます 。 


ツメ 

分 類 され た 機能 を 一 言 で 表 
し て いま す 。 機能 ご と に 探 
す 時 に 便利 で す 。 









line-height プロ バテ ィ の バグ に 注意 ! 

Internet Explorer 3X や Netscape Navigator 4.X に は 、line-height プロバ 
ティ に 関す る バグ が た くさ ん あり ます 。 た と えば 、Internet Explorer 3.X の 場合 
は 単位 を 付け な い 数 値 を 指定 する と ピク セル 数 と し て 認識 され ます し 、Netscape 
Navigator 4.X で は 絶対 的 な 単位 を 指定 し て いる と 印刷 で 問題 が 発生 する 場合 も あ 
り ま す 。 

中 で も 特に 注意 する 必要 が ある の が 、Netscape Navigator 4X で は line-height 
を 指定 し た 男 囲 に 画像 が 含ま れ て いる と 、 テ キス ト の 上 に 画像 が 重なっ て 表示 され 
る と いう バグ で す 。Netscape Navigator 4.X の ユー ザー か ら 「 文 字 の 上 に 画像 が 
重なっ て 読め な い ] と いう 苦情 が 来 た ら 、 ま ず は line-height を 疑っ て み ま し ょ う 。 


ペー ジ の 項目 や その 前 後 の 
項目 に 関連 し た 注意 点 や ワ 
ン ラ ンク 上 の テク ニッ ク な 
ご ど を 紹介 し て いま す 。「 コ ラ 
ム 」 の 他 に 「TIPS」 「 重 要 」 
「 注 意 ] が あり ます 。 









柱 
本 書 の 項目 は 、HTML パ ー ト ・CSS バー ト は 機能 ご と 、JavaScript は オブ ジェ クト 名 ご と 
に 分 類 さ れ て いま す 。 そ の 項目 名 で 探す 時 の 目安 に な り ま す 。 


本 書 の 使い 方 v 


HTML に つい て 
HTML4.01 と は ? .… 





ファ イル の 位置 指定 - 絶対 URL と 相対 URL -. 
三江 対応 の ホー ババ パー ジ 作 肢 arireeretreBdmt344Antaoeeeen frrdraosdi 


基本 的 な 内 容 
HTML の バー ジョ ン を 示す 
最低 限 必要 な 要素 .…… 
全体 の 文字 色 を 設定 する . 
全体 の 背景 色 を 設定 する .… 
全体 の 背景 画像 を 設定 する . 
目的 に 応じ て 範囲 を 設定 する .… 
コメ ント を 入れ る 


文書 情報 

タイ トル を 付け る 
文字 コー ド を 示す .… 
キー ワー ド 内容 の 紹介 制作 者 名 を 入れ る . 
スタ イル シー ト や スク リブ ト の 言語 を 示す . 
関連 する 他 の ペー ジ を 示す 
基準 URL を 設定 する .… 
自動 的 に ペー ジ を 読み 込む 


テキ スト の 種類 
見 出し を 表す . 




































短い 引用 文 を 表す .… 0 
長い 引用 放す aa 33 
軸 則 ea 

略語 を 表す ………… 
追加 し た こと を 示す 
削除 し だ こと を 示す … ん ee 
定義 対象 の 用 語 で ある こと を 示す .… 

プロ グラ ム 関 連 の テキ スト を 表す .…… 
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特別 な 文字 を 表示 させ る 41 
スタ イル と レイ アウ ト 

改行 させ る 

横 肢 線 を 入れ る .… 

テキ スト の スタ イル を 指定 する .… … イ オイ 


空白 や 改行 を その まま 表示 させ る 
セ め ダウ ジグ の まる の は le 
行 揃え を 指定 する .… 
文字 色 を 指定 する .… 
フォ ント の 種類 を 指定 する . 
フォ ント サイ ズ を 指定 する .… 
フォ ント サイ ズ を 相対 的 に 変え る 
フォ ント の 基本 サイ ズ を 指定 する 


リン ク 
他 の ペー ジ に リリ シク する os 
同じ ペー ジ の 特定 の 位置 に リン ク す る 
他 の ペー ジ の 特定 の 位置 に リン ク す る 
リン ク 部 分 の 文字 色 を 設定 する .………… 
リン ク 先 を 別 の ウィ ンド ウ に 表示 する 
リン ク で メー ル ソ フ ト を 起動 する 


リス ト 
マー ク 付 き の リ スト を 作る . 
リス ト の マー ク を 変え る . 
番号 付き の リス ト を 作る .… 
番号 の 形式 を 変え る .… 
番号 の 順序 を 変更 する … 
用 語 と 説明 の リス ト を 作る .… 


テー ブル 





























表 加 多 ポ 人 ee 7 ら 8 
の の っ る みつ 73 
セル の 大 き さ を 指定 する .… …74 
セル を 連結 する .…… -75 
セル と セル の 間隔 を 指定 する .… 0 の の 
セル の 枠 と 内 容 の 間隔 を 指定 する ……… 78 
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セル 内 で の 改行 を 禁止 する ……… 
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縦列 に 属性 や スタ イル シー ト を 指定 する . 
表 を セン タリ ング する 
表 に テキ スト を 
表 へ の 回 り 込み を 解除 する .… 

表 と 回 り 込 ませ た テキ スト の 間隔 を 指定 する .… 
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イメ ー ジ マッ プ を 作成 する 

画像 に テキ スト を 回 り 込 ませ る .… 105 
画像 へ の 回 り 込 み を 解除 する .…… 106 
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さま ざま な 形式 の デー タ を 配置 する .………… 
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用 的 な ボタ ン を 作る .… 
像 で 送信 ボタ ン を 作る 
由 に デザ イン で きる ボタ ン を 作る 
1 行 の 入力 フィ ー ル ド を 作る .… 
複数 行 の 入力 フィ ー ル ド を 作る .… 
パス ワー ド の 入力 フィ ー ル ド を 作る .… 
表示 され な い フ ィ ー ル ド を 作る .… 
ラジ オ ボ タ ン を 作る 
チェ ッ ク ボ ックス を 作る 
入 記 名 を 人 
メニ ュー の 選択 肢 を グル ー プ 化す る 
リス ト ボ ックス を 作る .………… 有 有 ム …… 
ファ イル 選択 の 機能 を 付け る .. 
項目 を グル ー プ 化す る ……… 

ラベ ル テ キ スト と 項目 を 一 体 化 さ せる .… 
フォ ー ム の 内 容 が メー ル で 届く よう に する 


ジノ 宮 
フレ ー ム の 全体 構造 を 指定 する .… 
フレ ー ム の 表示 方 法 を 設定 する 
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リフ ァ レ ンス 


HTML4.01 全 要 素 ・ 属 性 一 覧 .… 
HTML4.01 対応 状況 一 覧 .… 

1 モー ド 上 端末 で 利用 で きる 要素 ・ 属 性 一 覧 .… 
HTML4.01 で 定義 され て いる 特別 な 文字 .… 
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CSS に つい て 
スタ イル シー ト に つい て .… 
基本 的 な 書き 方 .………… 
単位 に つい て .…… 
色 の 指定 方 法 .… 
ボッ クス に つい て .… 
スタ イル の 優先 順位 


CSS の 組み 込み 
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任意 の 要素 に style 属性 の 値 と し て 組み 込む 
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すべ て の 要素 に 適用 させ る 


ID や クラ ス を 指定 し た 要素 に 適用 させ る .. 


リン ク 部 分 に 適用 させ る .… 
1 行 目 に 適用 させ る .… 
1 文字 目 に 適用 させ る .… 


特定 の 要素 に 含ま れる 要素 に 適用 


フォ ント 

文字 色 を 指定 する 
フォ ント を 指定 する .… 
フォ ント サイ ズ を 指定 する 
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フォ ント スタ イル を 指定 する .…… 
フォ ント 関係 を まとめ て 指定 する .… 


テキ スト 
行間 を 設定 する …… 
行 揃え を 指定 する … 
縦 方 向 の 位置 を 指定 する .… 
文字 間隔 ・ 単 語 間隔 を 設定 する . 
1 行 目 の イン デン ト を 設定 する .… 
空白 や 改行 を その まま 表示 させ る 
改行 し な いで 表示 させ る .… ぼ ……………… 5 
全体 を 夫 文字 ま 氏 は 小文字 で 表示 させ る as 


背景 

背景 色 を 指定 する 
背 標 画像 移 指 中 87 
背景 画像 の 並び 方 を 指定 する .…… せ ee 230 
背景 画像 の 表示 位置 を 指定 する .… 
背景 画像 を 固定 する 
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ボッ クス 
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枠 線 の 色 を 指定 する .… 
枠 線 の 形式 を 指定 する .… 
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絶対 的 な 位置 に 固定 配置 する .. 
重なる 順序 を 指定 する .… 
表示 され な いよ うに する .… 

は み 出 る 部 分 の 処理 方 法 を 指定 する .… 


リス ト 
リス ト の マー ク や 番号 の 形式 を 変え る .… 
リス ト の マー ク を 画像 に する .… ぽ ………… 
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ら 75 















印刷 時 の 改 ペ ー ジ を 指定 する .… .281 
誠 索 の 前 後に デキ スズ ド や 画 全 だ oe 282 


引用 待 どじ で 使用 す 宙 本 号 友 概 志す る aa 283 
コメ ント を 入れ る 





リフ ァ レ ンス 
CSS2 全 プロ パテ ィ ー 覧 .… 
CSS8 対応 状況 一 覧 


JavaScript パ ー ト 


JavaScript に つい て 
JavaScript と は ? .……… 
JavaSoript の 記述 法 . 

に リル セー ツル リ 0 304 

| ルン | に ン の 人 

event オ ブ ジ ェクト に よる イベ ント の 取得 . 













ナビ ゲー タオ ブ ジ ェ ク ド 


navigator オ ブ ジ ェクト 
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ブラ ウザ の コー ド 名 を 取得 する .… 
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ブラ ウザ の 使用 言語 を 取得 する 
ブラ ウザ の 判別 を する 
Java が 使え る か どう か 判断 する 
使用 可能 な MIME の タイ プ を 取得 する .… 
使用 可能 な プラ グイ ン を 取得 する .…… 
プラ グイ ン が イン スト ー ル され て いる か チェ ッ ク す る .… 
その 他 の navigator オ ブ ジ ェクト 


screen オ ブ ジ ェクト 
ディ スプ レイ の サイ ズ を 取得 する 
ディ スプ レイ の 表示 情報 を 取得 する .. 


event オ ブ ジ ェクト 
イベ ント の タイ ブ を 取得 する 
どこ で イベ ント が 発生 し た か を 取得 する .… 
ドラ ッ グ 8S ドロ ッ プ し て いい か 確認 する … 
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自 ペ ー ジ の URL を 取得 する .……………… 
入力 され た URL へ 進む フォー ム を 作る 
ペー ジ の ロー ド が 完了 し て か ら 次 の ペー ジ を ロー ド す る 
JavaScript 対応 ペー ジ と 未 対応 ペー ジ を 振り 分 ける .. 
各 ブ ラウ ザ 専 用 ペー ジ に 振り 分 ける 
アン カー を 設定 する 
リロ ー ド ボタ ン を 作る .… 
元 の ペー ジ へ 戻れ な いよ うに する .… 


Link オ ブ ジ ェクト ・Anchor オブ ジェ クト 
リン ク の URL の 情報 を 表示 する 
リン ク の 上 に ポイ ンタ が 乗る と ウィ ンド ウ を 開く .… 
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Date オブ ジェ クト 
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イン ター ネッ ト の ブー ム は 、Mosaic と いう 画像 を 表示 で きる Web プラ ウザ と 共に 突 
然 や っ で きま し た 。 

そし て 、 そ れ に 続い て Netscape Navigator と いう Web プラ ウザ が 登場 し まし た 。 
Netscape Navigator は 、 プ ラグ イン 機能 で きま ざま な デー タ の 取り 扱い を 可能 に し 、 フ 
レー ム 機 能 や JavaScript な どの スク リプ ト 言 語 も 利用 で きる よう に し て いき ま あん 

その うち 、 途 中 か ら 登場 し て きた Intemet Explorer と Netscape Navigator は 、 激 し い 
シェ ア 争 い の た め に 、 次 々 と 独自 の 機能 を 追加 する よう に な っ て いき ます 。 そ し て 、 
ユー ザー は 「 新 し い 機能 ] を こぞって 使う と いう 時 期 が 、 し ば らく 続い て いま し た 。 当 
時 は 単純 に アク セス 数 が 多けれ ば 多い ほど よい と 思わ れ て いた 時 代 で 、 新 し い 機 能 を 
使っ て 「 こ ん な こと も で きる !] と いう ペー ジ を 作る だ け で 、 ア クセ ス 数 が 多く な っ た こ 
と を 記憶 し て いま す 。 


し か し 、 し ば らく する と 、 そ れ に よる 弊 害 も 現れ て きま し た 。 常に 最新 の Web プラ 
ウザ を 利用 し て いな いと 、 見 る こと の で き な い ペー ジ が 多く な っ て し まっ た の で す 。 当 
時 の Web サイ ト に は 、 ト ッ プ ペー ジ に 「 〇 〇 〇 の バー ジョ ン X.XX 以上 で ご 覧 くだ き 
い 」 な ど と 書か れ て いた こと が 、 そ れ を 象徴 し て いま す 。 つま り 、 本 来 は 多く の 人 に 見 
て 欲し い は ず の Web ペー ジ が 、 ユ ー ザ ー を 限定 し て し ま う 方 向 へ と 進ん で し まっ た わ 
け で す 。 


ちょ うど その 頃 、WWW の 標準 化 を 行っ て いる W3C(World Wide Web Consortium) 
が 、HTML4.0 と いう 仕様 を 発表 し まし た 。 こ の 仕様 の も っ と も 重要 な 点 は 、「 今 後 は 
HTML か ら 表 示方 法 や レイ アウ ト な どの 「 表 現 ] に 関す る 部 分 を 排除 し て いく 」 と いう 明 
確 な 方 針 を 示し た こと で す 。 同 時 に 、HTML に スタ イル シー ト を 組み 込む た め の 仕組 
み も 正式 に 導入 され 、Web コン テン ツ の 表示 方 法 に つい て は 、 ス タイ ル シ ー ト を 使用 
し て 制御 する こと が 推 状 さ れ ま し た 。 


で は 、HTML か ら 「 表 現 方 法 」 に 関す る 部 分 を 取り 除く と 、 ど うな る の で し ょ うか 2 
た と えば 、「 見 出し 」 の 部 分 を 、 見 出し を 意味 する h1 要素 (<hl> </hl>) と し て タダ 付 
けし た 場合 と 、font 要 素 (<font> </fon>) で 大 きき さや 色 だ け を 指定 し た 場合 を 考え て 
まま 9 

も し 、 そ れ が hl 要素 で あれ ば 、 プ ラ ウザ は その 環境 に 合わ せ た 表現 を する こと が で 
きま す 。 た と えば 、 文 字 の 大 き さ が 変え られ な い プ ラウ ザ で あれ ば 、 見 出し を セン タ 
リン グ し た り 改 行 す る な ど し て 表現 で きま すし 、 音 声 プ ラウ ザ で あれ ば 読み 上 げ る 速 
度 や 声 の 種類 を 変え る こと に よっ て 表現 する こと も で きま す 。 

し か し 、 こ れ が font 要素 で あれ ば 、 フォ ント サイ ズ や 色 が 表現 で き な い 環境 で は 、 
その 意味 が まっ た く な く な っ て し まう の で す 。 


つま り 、「HTML で は それ が 何で ある か だ け を 示し 、 表 示方 法 を 指定 (限定 ) し な い | 
と いう こと は 、「 さ ま ざ ま な 環境 で それ に 合わ せ た 表現 方 法 を 使っ て 情報 を 伝え る こと 


が で きる | と いう こと に な り ま す 。 こ れ に よっ て 、HTML で 書か れ た 情報 が 、 白 黒 の 画 
面 で も 、 テ キス ト 端 末 で も 、 音 声 で も 、 点 字 で も 、 そ の 環境 に 応じ て 利用 する こと が 
で きる よう に な る と いう わけ で す 。 そ し て 、 一 般 的 な パソ コン な どの 環境 で は 、 ス タ 
イル シー ト を 利用 する こと で 、 今 まで 以上 の 豊か な 表現 も 可能 に な る の で す 。 


し か し 、 急 に 「HTML か ら 表 示 に 関す る 部 分 を 取り 除き まし ょ う 」 と 言わ れ て も 、 ブ 
ラウ ザ が スタ イル シー ト に 対応 し て いな けれ ば 、 す ぐに そう する わけ に も いき ませ ん 。 
そこ で 、HTML4.0 で は 、 今 まで 利用 され て きた 「 表 示 を 制御 する 要素 ] も 「 非 推 装 ] と し 
て で は あり ます が 、 使 うこ と が で きる よう に な っ て いま す 。 

HTML4.0 に は 、 「 非 推 奨 ] の 要素 を 使う か どう か 、 ま た フレ ー ム を 利用 する か どう か 
に よっ て 、3 パ ター ン (3 種 類 の DTD) が 用 意 さ れ て いる の で す 。 し た が っ て 、 制 作者 
は 、 そ の サイ ト の 目的 や ヤセ ター ゲッ ト に 応じ て 、 過 去 の 「 表 示 を 制御 する 要素 ] も 引き 続 
き 使う こと も で きま すし 、 逆 に それ ら を 排除 し て 、 よ り 多 く の 環 境 で 利用 で きる よう 
な Web ペー ジ を 制作 する こと も で きま す 。 


HTML4.01 は 、HTML4.0 の 仕様 書 に あっ た 不具 合 を 修正 し 、 既 存 の プラ ウザ と の 互 
換 性 を 考慮 し て 多少 の 変更 を 行っ た も の で 、 本 書 は この HTML4.01 の 仕様 を 元 に 解説 
し て いま す 。 実際 に は 、HTML4.01 は XML で 再 構築 され て XHTML1.0 と な り 、 さ ら 
に それ が モジ ュー ル 化 され て XHTML1.1 へ と 進化 し て いま す が 、 基 本 的 な 要素 や 属性 
の 使い 方 は HTML4.01 か ら 変 わっ て いま せん 。 「 非 推奨 ] の 要素 や 属性 を 使わ ず に 、 正 
し い 書 き 方 き を し て お け ば 、XHTML へ の 移行 も 意外 に 簡単 で す 。 


l 要素 と 属性 き 


ここ で は 、HTML を 理解 する 上 で 欠か せな い 用 語 で ある 「 要 素 」 や 「 属 性 ] な ど に つい 
て 簡単 に 説明 し ます 。 


まず 、 次 の 文章 を 見 て くだ さい 。 





上 の 例 で は 、 ま ず 最 初 に 「HTML の 用 語 に つい て 」 と いう 見 出し が あっ て 、 そ れ に つ 
いて 書か れ た 段落 が 続い て いま す 。 

これ は 、 人 間 が 見 れ ば わか る こと な の で す が 、 コ ンピュータ に と っ て は そう 簡単 に 
識別 で きる も の で は あり ませ ん 。 そ こ で 、 そ れ ぞ れ の 構成 要素 を 、 そ の 役割 を 表す 目 
印 を 付け て 示す こと に し ます 。 上 の 例 で は 、「 見 出し 」 と 「 段 落 ] を 示せ ば よい の で 、 そ 
の 範囲 も 明確 に する た め に 、 その 開始 部 分 と 終 耳 部 分 に 目印 を 付け 、 終了 の 目印 に は そ 
れ が わか る よう に [/| も 付け て み ま し ょ う 。 実際 に 目印 を 付け て みた も の が 次 の 例 で す 。 





AcOnTWuH 竹 
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< 見 出し >HTMT, の 用 語 に つい て </ 見 出し > 


< 段落 >HTML で 使わ れる 用 語 を 正しく 理解 し て いる と 、 
文法 や その 構造 が いっ そう 理解 し や すく な り ま す 。</ 段 落 > 


この よう に 、 あ ら か じ め 構 成 要 素 を 表す 目印 を 決め て お け ば 、 コ ンピュータ も その 
部 分 が 何で ある か を 簡単 に 判断 する こと が で きる よう に な り ま す 。 を じ で 、 7 な と 史 ば 
見 出し で あれ ば 大 き な 文 字 で 表示 する な ど 、 状 況 に 応じ た 表現 で それ を 示す こと が で 
きる よう に な り ま す 。 





上 の 例 で は 、 目 印 を 日 本 語 で 付け まし た が 、 そ れ を 英語 に し て みる と 「 見 出し ] は 
「heading]、「 段 落 ] は 「paragraph]」 に な り ま す 。 見 出し に は 大 見 出し や 小見出し な どの 種 
類 が あり ます の で 、 そ れ を 数 字 で 表す こと に し て 、 そ れ ぞ れ の 目印 を 単語 の 頭 文字 で 
示し て みる と 、 次 の よう に な り ま す 。 


<h1>HTML の 用 詰 に つい て </h1> 


<p>HTML, で 使わ れる 用 語 を 正しく 理解 し て いる と 、 
文法 や その 構造 が いっ そう 理解 し や すく な り ま す 。</p> 


完全 で は あり ませ ん が 、 見 事 に HTML に な り ま し た 。 HTML で タグ を 付け る と いう 
こと は 、 こ の よう な こと な の で す 。 上 の 例 で いう 「 目 印 が 、HTML の 「 タ ゲ グ (ag)」 と い 
うわ け で す 。 そ し て 、 タ グ に よっ て 役割 と 範囲 示さ れ た 構成 要素 その も の が 、 HTML 
の 「 要 素 (element) 」 な の で す 。HTML で 要素 と いえ ば タグ も 合 め た 全体 を 指し ます が 、 
タグ を 除い た 部 分 を 示す 場合 に は 、 そ れ を 「 内 容 (content) 」 と 表現 し ます 。 





要素 
| 
<h1>HTML, の 用 語 に つい て </h1> 
内 容 
開始 タグ 終了 タグ 


次 に 、 要 素 の 表し 方 に つい て 、 も う 少 し 詳し く 説 明 し ます 。HTML で は 、 一 般 に 要 
素 は 開始 タグ と 終了 タグ で 囲っ て 示し ます が 、 開 始 タ グ は [< 要素 名 >」 の よう に 、 終 了 
タグ は 「</ 要 素 名 >] の よう に 前 に 「/」 を 付け て 記述 し ます 。 こ の 場合 、 HTML4.01 で は 
要素 名 を 大 文字 で 書い て も 小文字 で 書い て も か まい ませ ん 。 た だ し 、XHTML で は 要 
素 名 を すべ て 小文字 で 書く こと に な っ て いま す の で 、 注 意 し て くだ さい (本 書 で は 、 小 
文字 に 統一 し て いま す )。 


1 東 と 属性 


また 、 要 素 に は 内 容 を 持た な いも の も あり ます 。 た と えば 、 画 像 を 表示 する た め の 
img 要素 や 、 改 行 の た め の br 要素 な ど が それ に あたり ます 。 こ れ ら は 、「 空 要素 」 と 呼 
ば れ 、 開 始 タ グ の み で それ を 表し ます 。 終了 タグ は 必要 あり ませ ん の で 、 書 か な いよ 
うに し て くだ さい 。 


次 に 「 属 性 (attribute) 」 に つい て 説明 し ます 。 属性 は 、 要 素 の 開始 タグ の 中 に 指定 し 
て 、 そ の 要素 の 性 質 や 特性 を 示す た め に 使用 され ます 。 基本 的 に は 「 属 性 名 =" 値 "の 形 
式 で 表し 、 ス ペー ス で 区 切っ て 複数 指定 する こと も で きま す 。 そ の 場合 の 指定 順序 は 
問い ませ ん 。HTML4.01 の 場合 は 、 要 素 の 場合 と 同様 に 属性 名 は 大 文字 で も 小文字 で 
も か まい ませ ん が 、XHTML の 場合 は 小文字 で 書く こと に な っ て いま す 。 ま た 、 
HTML4.01 で は 属性 の 値 を 囲う 引用 符 (") を 、 条 件 に よっ て は 省略 で きる こと に な っ て 
いま す 。 し か し 、 こ れ も XHTML で は 省略 で きま せん の で 、 常 に 省略 し な いで 書い て 
お いた ほう が いい で し ょ う (HTML4.0 で も 省略 し な いこ と が 推奨 きれ て いま す )。 な お 、 
引用 符 に は 「"] だ け で な く 、「」 を 使う こと も で きま す 。 


肛 。。。 フロ ッ ク レ ベル 要素 と イン ライ ン 要 素 。 目 


文書 中 で 使用 され る 要素 の 多く は 、 プ ロッ クレ ベル 要素 と イン ライ ン 有 要素 に 分 類 
する こと が で きま す 。 ま た 、 イ ン ラ イン 要素 の 中 に は 置換 要素 と 呼ば れる も の が あ 
り ま す 。 


ブロ ッ ク レ ベル 要素 
その 名 の 通り プロ ッ ク (ひと つの まとまっ た 上 単位) と し て 表 さ れる 要素 で 、 見 出し ・ 
段落 ・ リ スト ・ テ ー ブ ル な ど が 該当 し ます 。 一 般 的 に 、 そ の 前 後 は 改行 され ます 。 


address blockquote center div d| 
fieldset form h1 -h6 hr noframes 
Ql D Dre table Ul 

イン ライ ン 要 素 

文章 の 一 部 分 と し て 含ま れる 要素 で 、 リ ンク ・ 強 調 ・ 語 な ど が 該当 し ます 。 

8 abbr acronym applet b 
basefont big br button cite 
Code dfn em font i 
iframe img input kbd label 
object d S Samp select 
Small Span Strike Strong Sub 


SUD textarea tt U Var 


へ OnTWuH 仙 





con 較 計 


置換 要素 
イン ライ ン 要 素 の うち 、 表 示さ れる 時 に 要素 自体 が ある も の で 置き 換わる よう な 要 
素 を 指し ます 。 


img Input Object seleot textarea 
※inS 要 素 と del 要素 は 、 指 定 する 範囲 に 応じ て ブロ ッ ク レ ベル 要素 と イン ライ ン 要 素 の いずれ に も な り ま す 。 





を 色 の 指定 方 法 き 


HTML で 色 を 指定 する に は 、2 通り の 方 法 が あり ます 。 実際 の 色 と そ の 値 に つい て 
は 、 巻 末 付 録 「 カ ラー チャ ー ト 1~3] を 利用 する と 便利 で す 。 


16 進数 で 指定 する 


| 旬 記 号 に 続け て 、RGB (Red, Green. Blue) の 各 値 を 2 桁 ず つの 16 進数 で 示し ます 。 
た と えば 、 赤 を 指定 する 場合 に は 「#ffO000] と な り ま す 。 


色 の 名 前 で 指定 する 


HTML4.01 で は 、 基 本 的 な 16 色 (巻末 付録 [カラ ー チ ャ ー ト 1 : HTML4.01 で 名 前 が 
定義 され て いる 色 」 を 参照 ) に つい て は 、 色 を 名 前 で 指定 する こと が で き まま 。 だ よみ 


ば 、 赤 の 場合 は 「red] と 指定 で きま す 。 この 場合 、 大 文字 と 小文字 は 区 別 さ れ ま せん 。 
※ 色 を 指定 する 場合 は 、HTML を 使用 せ すず に 、 ス タイ ル シ ー ト を 利用 する こと が 推 奨 され て いま す 。 


上 l ファ イル の 位置 指定 絶対 URL と 相対 URL 目 


た と えば 、 あ る 部 分 を リン ク さ せる 場合 は リン ク 先 の HTML ファ イル の 位置 を 、 画 
像 を 表示 させ た い 場 合 に は その 画像 の 位置 を 指定 する 必要 が あり ます 。 HTML で は 、 
この 位置 を URL で 示し ます が 、 そ れ に は 2 通り の 方 法 が あり ます 。 


絶対 URL 


これ は Web プラ ウザ で ペー ジ を 見 て いる 時 に アド レス バー な ど に 表示 され て いる 、 
「htp:/] で 始ま る 形式 の 指定 方 法 で す 。 こ の 方 法 で 指定 する と 、 そ の デー タ の 転送 方 式 
や サー バー、 サ ー バ パー 内 で の 位置 まで 完全 に 指定 する こと に な り ま す 。 

一 般 に 、 自 分 の サイ ト 内 か ら 他 の サイ ト へ と リン ク す る 場合 な ど 、 他 の サイ ト の ファ 
イル に 対し て 使用 され る 形式 で す 。 


【 重 pttp:/7www-w3-er9/ 開 時 | IE 





相対 URL 


相対 URL は 、 同 じ サ イト 内 で 参照 を 行う 場合 な ど 、 同 じ デ ィ ス ク 上 の ファ イル を 参 
照 す る 場合 に 利用 され る 形式 で す 。 こ の 場合 、 現 在 の ファ イル の 位置 を 基準 と し て 、 
ディ レク トリ (フォ ル ダ ) の 階層 の 上 下 を 示す こと に よっ て 位置 を 示し ます 。 

自分 で ホー ムペ ー ジ を 作成 し て いる 場合 な ど 、 オ フラ イン の 状態 で も 利用 で きる よ 
うに する た め に は 、 こ の 方 法 で 指定 し て くだ さい 。 


相対 URL の 指定 方 法 は 、 自 分 より 下 の 階層 に ある ファ イル の 場合 は 、 そ の ディ レク 
トリ 名 か ら フ ァイル 名 まで を 順に 「/| で 区 切っ て 記述 し て いき ます 。 上 の 階層 を 示す に 
は 、 ひ と つ 上 を 示す ご と に 「.| を 付け て 指定 し ます 。 


・ 同 じ 階 層 ( デ ィ レ クト リ ) の ファ イル を 示す 場合 : 


・ ひ と つ 下 の 階層 (同じ 階層 に ある ディ レク トリ 内 ) の ファ イル を 示す 場合 : 


・ ふ た つ 下 の 階層 の ファ イル を 示す 場合 : 


・ ひ と つ 上 の 階層 の ファ イル を 示す 場合 : 


・ ふ た つ 上 の 階層 の ファ イル を 示す 場合 : 


・ ひ と つ 上 の 階層 の 別 デ ィ レ クト リ の ファ イル を 示す 場合 : 





AcOnTMun 半 





son 較 議 


旧 


i モ ー ド 対応 の ホー ムペ ー ジ 作成 # 


モー ドサ ービス ]」 を 利用 する と 、 携 帯電 話 か ら イ ンタ ーネット に 接続 し て 、Web 


ペー ジ を 見 る こと が で きま す 。 し か し 、 そ の 場合 に 見 る こと の で きる 内 容 に は 、 い く 
つか の 制限 が あり ます 。 
実際 に 1 モ ー ド か ら 見 て もら うた め に は 、i モ ー ド 端末 専用 の ペー ジ を 作成 する 必要 


が あ 


る と 考え た ほう が よい で し ょ う 。 


具体 的 な 制限 事項 と し て は 、 次 の よう な も の が あり ます 。 








-・ 使 用 で きる 要素 や 属性 が 限ら れ て いる 


(P.173 の リフ ァ レ ンス 「i モ ー ド 端末 で 利用 で きる 要素 ・ 属 性 一 覧 ] を 参照 ) 


・ 表 示 可 能 な 文字 コー ド は シフ ト JIS の み 
・ 表 示 可 能 な 画像 は GIF 形式 (JPEG に 対応 し た 機種 も ある ) 
・ ス クリ プ ト 言 語 に は 未 対応 





に 3 
り ま 


・ 画 像 は 2 階 調 の GIF 形式 を 使用 する 

・ 画 像 の サイ ズ は 最大 で 94 X72 ピク セル 以内 に する 
・1 ペー ジ の サイ ズ は 5KB 以内 に する (2KB 以内 を 推奨) 
・ 表 示 画 面 は 全角 で 横 8 文字 X 縦 6 行 


た 、 全 機種 で 利用 で きる よう に する た め に は 、 さ きら に 以下 の 基準 を 守る 必要 が あ 
す 。 








そ 





の 反面 、1 モ ー ド 端末 で は 、 次 の よう な こと が 可能 に な っ て いま す 。 























・ 独 自 の 「 絵 文字 ] が 利用 で きる 
・ 半 角 カ ナ が 問題 な く 利 用 で きる 
・ リ ンク を 利用 し て 電話 を か ける こと が で きる 


・ シ ョ ー ト カッ トキ ー と し て 「0 一 9,# "| が 単独 で 利用 で きる 


(URL と し て 「tel:-] 形式 が 利用 可能 」) 
【 例 】 <a href="te1:03-1234-5678"> て </a> 


(た だ し 、 端末 に よっ て は 「# *| は 使用 で き な い ) 
【 例 】<a href="http:// て " accesskey="1"> </a> 














生生 、 sssedaareisofsEXSSSeGsShoWeeooaiitreesy 


| <!DOCTYPE > | 


その HTML 文書 が 、HTML の どの バー ジョ ン の 決ま り に 従っ て 書か れ て いる の か を 示 


7e7ox 
oz/a 


束 
hh ni 
bl bl 2 に 
に 】 に 】 いい ー] 


WMZ.X 
し ます 。 
HTML に は 、HTML3.2・HTML4.01・XHTML1.0・XHTML1.1 な どの 異な る バー ジョ ン 
が あり 、HTML4.01 と XHTML1.0 は 、 さ ら に [Stricul「Transinonall「Framesell と いう 3 
つの 種類 に 分 か れ て いま す 。 使 用 する パー ジョ ン や 種類 に よっ て お 決ま り の 書き 方 が 
リリ コ ド 」 


あり ます の で 、 そ の まま 文書 の 先頭 に 配置 し て くだ さい 。 こ こ で 使用 する バー ジョ ン 
を 示し た ら 、 そ の バー ジョ ン の 決ま り に 従っ た HTML を 書く 必要 が あり ます 。 本 書 の 馬 記 
内 容 に 沿っ た ペー ジ を 作成 する の で あれ ば 、 以 下 の サ ンプ ル で 示す よう に HTML4.01 議 
の 「Transitionall を 指定 し て お け ば 基本 的 に 問題 な いで し ょ う 。 な た om 
な お 、<!DOCTYPE> は 要素 を 表す タグ で は な く 「 文 書 型 官 言 ] と いう も の で 、 正 式 な 英語 
HTML に は 必須 の も の で す 。 


<!DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTMT, 4.01 Tr 
http: / /Www .W3 . ord/TR/htm14/1oose .dtd"> 

<htm] 1ang="]a"> 

<head> 
) 

</head> 

<Dody> 
) 

</body> 

</htm1> 





の d 和 8 届 上 上 


新しい ブラ ウザ は <!DOCTYPE> の 書き 方 で 表示 が 変わ る ! 
Intemet Explorer の Windows 版 の 6.0 や Macintosh 版 の 5.X 以 降 を 始め と す 
る 比較 的 新しい ブラ ウザ (Firefox、Mozilla、Netscape 6.0 以 降 、Opera、Safari 
な ど ) に は 、 応 た つの 表示 モー ド が あり ます 。 ひ と つ は 標準 的 な 仕様 に 従っ た 表示 を 
する 「 標 準 モー ド ] で 、 も う ひ と つ は これ まで の 各社 ブラ ウザ の 独特 な 表示 方 法 と の 
互換 性 を 持た せ た [ 互 換 モ ー ド 」 で す 。 こ の ふた つの モー ド は 、<!DOCTYPE> が ど 


の よう に 書か れ て いる か で 自動 的 に 切り 替わり ます の で 、 注 意 し て くだ さい 。 各 ブ 
ラウ ザ で 切り 替わる 条件 が 多少 異な っ て は いま す が 、HTML4.01 Strict と 
HTML4.01 Transitional で UHL 部 分 を 省略 し な い 場 合 に は 「 標 準 的 モー ド 」 に 、 
HTML4.01 Transitional で UHL 部 分 を 省略 し た 場合 と <IDOCTYPE> 自体 が 書 
か な か っ た 場合 に は 「 互 換 モ ー ド 」 に な る と いう 点 で は 共通 し て いま す 。 本 書 で は 、 
それ ぞ れ の モー ド で 表示 結果 が 異な る 部 分 に つい て は 、 そ の 都度 解説 し て いま す の 
で 、 参 考 に し て くだ さい 。 
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の 選 滞 民 避 幹 計時 肝 着 暗 人 


HTML4.01 の 種類 と <!DOCTYPE 一 > の 書き 方 

以下 に 、 本 書 の 内 容 に 治っ た ペー ジ を 作成 する 場合 に 使用 され る と 思わ れる 
HTML4.01 の 種類 と 、 そ れ を 使用 し た 場合 の <IDOCTYPE> の 書き 方 を 示し ます 。 
紙面 の 都合 で それ ぞ れ ら 行 に な っ て いま す が 、1 行 に し て も 問題 あり ませ ん 。 ま た 、 
各行 目 の URL の 部 分 ("http://….dtd") は 省略 する こと も で きま す 。 


・HTML4.01 Strict 

本 来 の 理想 的 な HTML4.01 を 書く 場合 に は 、 こ の <!DOCTYPE> を 指定 し て 
くだ さい 。 た だ し 、HTML4.01 で 非 推奨 と され て いる レイ アウ ト な どの 見 栄え を 
表現 する 要素 や 属性 と フレ ー ム は 使う こと が で きま せん 。 ま た 、 各 要素 を 配置 で き 
る 位置 や 順序 な ど に つい て も 、 厳 し い 制 限 が あり ます 。 こ れ に 沿っ た ペー ジ を 作る 
に は 、 本 書 で 紹介 し て いる 以上 の 知識 も 必要 に な り ま す 。 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 20 
"httDp: / /www .w3 . org/TR/htm14/strict .Qtd"> 


・HTML4.01 Transitional 

HTML4.01 で 非 推奨 と され て いる 要素 や 属性 も 使用 可能 で 、 各 要素 を 配置 で き 
る 位置 や 順序 に つい て も 自由 度 の 高い HTML で す 。 た だ し 、 イ ン ラ イン フレ ー ム 
以外 の フレ ー ム は 使用 で きま せん 。 一 般 的 に 考え る と も っ と も 利用 し や すい 種類 な 
の で す が 、 上 記 の HTML4.01 Strict を 採用 する こと が 難し い 場 合 に 利用 する た 
め の 、 暫 定 的 な バー ジョ ン で ある と いう こと も で きま す 。 本書 で は 、 基 本 的 に 
HTML4.01 Strict に 沿っ た 解説 を し て いま す が 、 細 か い 部 分 で それ に 従っ て いな 
い 箇 所 が 生じ る 場合 わ ち わり ます の で 、 こ の <!DOCTYPE> を 使用 する こと を お 勧 
めし ます 。 


< く !DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 2 
"http : / /www .w3 . org/TR/htm14/1oose .dtd"> 


・HTML4.01 Frameset 

フレ ー ム を 使用 する 場合 に 指定 する <!DOCTYPE> で す 。 イ ン ラ イン フレ ー ム 
以外 の フレ ー ム も 使用 で きる と いう 点 を 除け ば 、HTML4.01 Transitional と 基 
本 的 に は 同じ も の で す 。 





< く !DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTML, 4.01 2 
"htEDp : / /www .w3 . org/TR/htm14/fFrameset . dtd"> 











HTML 文 書 の 構造 





<IDOCTYPE> 


文書 に 関す る 情報 
文書 の タイ トル 


ブラ ウザ に 表示 
され る 内 容 


HTML 文書 の 先頭 に は は HTML の バー ジョ ン を 示す <!DOCTYPE > を 配置 し ます が 、 
その 後に は 、 最 低 限 こ こ で 説明 する 4 つの 要素 が 必要 と な り ま す 。 

まず 、<!DOCTYPE> 以降 の 全体 を html 要素 (<him> hml>) で 囲う よう に し て 、 そ 
の 中 に head 要素 (<head> </head>) と body 要素 (<body> </body>) を 順に ひと つ ず つ 
配置 し ます 。 

head 要素 の 中 に は その 文書 に 関す る 情報 を 入れ 、body 要素 の 中 に は 実際 に ブラ ウザ で 
表示 され る 内 容 を 書い て いく こと に な り ま す 。 ま た 、head 要素 の 中 に は 、 そ の 文書 の 
タイ トル を 示す title 要素 を 必ず ひと つ だ け 入 れ て お く 必 要 が あり ます 。 


ETTU 呈 ーー 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN" 陶 
"httDp : / /www .W3 .org/TR/htm14/1oose .dtd"> 
<htm1 1ang="]a"> 
<head> 
… こ の 文書 に 関す る 情報 … 
<tit1e> この 文書 の タイ トル </tit1e> 
… こ の 文書 に 関す る 情報 … 
</head> 
<body> 
… 実 際 に 表示 され る 内 容 
</body> 
</htm1> 
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body 要 業 の tsxt 属 性 を 使用 する と 、 ペー ジ 全体 の 文字 色 を 設置 body 要 素 の tcxt 属 性 を 使用 する と 、 ペー ジ 全 体 の 文字 色 を 設定 す 
定 す る こと が で きま す 。 <| る こと が で きま す 。 M 


body 要素 の text 属 性 は 、 ペ ー ジ 全体 を 通し て の 文字 色 を 設定 し ます 。 

店 柄 剛 文字 色 を 設定 する 場合 に は 、 同 時 に 背景 色 も 設定 し て お く よ う に し て くだ さい 。 そ う 
5 し て お か な いと 、 ユ ー ザ ー が プラ ウザ の 設定 で 背景 色 を 変更 し て いる 場合 な ど に 、 文 

字 色 と 背景 色 が 同じ 系 統 の 色 に な っ て し まい 、 文 字 が 読め な く な っ て し まう 可能 性 が 

あり ます 。 ま た 、 同 様 の 理由 で 同時 に リン ク 部 分 の 文字 色 も 設定 し て お く こ と を お 勧 

めし ます 。 

な お 、HTML で 色 を 設定 する 方 法 は 、 さ きま ざま な 理由 か ら 非 推 所 と され て お り 、 新 し 

い HTML の 標準 仕様 で は 使う こと が で き な く な っ て いま す 。 色 を 設定 する 場合 に は 、 


ま で きる だ け ス タイ ル シ ー ト を 利用 する よう に し て くだ さい 。 
な EPC LLLLLLuu ニ トリ VV 
る 


< く !DOCTYPE HTMTL PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN" 
"http : / /www .w3 .org/TR/htm14/1oose.dtd"> 内 

<htm] 1ang="]a"> 

<head> 

<meta http-equ1iv="ConEent-Type" 1 
charset=ShifFt JTS"> 

<tit1e>HTML で 全体 の 文字 色 を 設定 する </tit1e> 

</head> 

<body textE="#0066cc" bgco]or="# 上 上 FT 和 F"> 

<h1> 文字 色 </h1> 


<D> 

body 要素 の text 属性 を 使用 する と 、 ペ ー ジ 全体 の 文字 色 を 設定 する こと が で きま す 。 
く /p> 

</body> 

</htm1> 





全体 の 背景 色 を 設定 する 
<body bgcolor=" 台 導 定 ">ー</body> 





Internet Explorer 6.0 


E ILS ゴリ 


body 要素 の bgcolor 属 性 は 、 ペ ー ジ 全体 の 背景 を 、 指 定 し た 色 に 設定 し ます 。 

背景 色 を 設定 する 場合 に は 、 同 時 に 文字 色 も 設定 し て お く よ う に し て くだ さい 。 そ う 
し て お か な いと 、 ユ ー ザ ー が プラ ウザ の 設定 で 文字 色 を 変更 し て いる 場合 な ど に 、 背 
景色 と 文字 色 が 同じ 系 統 の 色 に な っ て し まい 、 文 字 が 読め な く な っ て し まう 可能 性 が 
あり ます 。 ま た 、 同 様 の 理由 で 同時 に リン ク 部 分 の 文字 色 も 設定 し て お く こ と を お 和 勧 
めし ます 。 

な お 、HTML で 色 を 設定 する 方 法 は 、 さ ま ざ ま な 理由 か ら 非 推 所 と され て お り 、 新 し 
い HTML の 標準 仕様 で は 使う こと が で き な く な っ て いま す 。 色 を 設定 する 場合 に は 、 
で きる だ け ス タイ ル シ ー ト を 利用 する よう に し て くだ さい 。 


EE 握 aa 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 1 
"htED : / /www .w3 . org/TR/htm14/1oose .dtd"> 

<htm] 1ang="]a"> 

<head> 

<meta htp-equ1v="ConEent-Type" content=" text/htm1 : 軸 
charset=ShifFt_JTS"> 

<tit1e>HTML で 全体 の 背景 色 を 設定 する </tit1e> 

</head> 

<body text="#000000" bgco1or="#EE6600"> 

<h1> 背 景色 </h1> 

く D> 

body 要素 の bgco1or 属性 を 使用 する と 、 ペ ー ジ 全体 の 背景 色 を 設定 する こと が で きま す 。 

く /p> 

</body> 

</htm1> 








(42 色 指 定 : 「HTML に つい て 」 の 「 色 の 指定 方 法 」(P.6) 
< も ody text="ー>:「 革 本 的 な 内 容 」 の 「 全 体 の 文字 色 を 設定 する 」(P.18) 
<body link="ー>:「 リ ンク 」 の 「 リ ンク 部 分 の 文字 色 を 設定 する 」(P.59) 
スタ イル シー ト : 「 背 景 」 の 「 背 景色 を 指定 する 」(P.224) 
色 指 定 : 巻 付録 「 カ ラー チャ ー ト 1 一 3] (巻末 ) 
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全体 の 背 景 画像 を 定 する 


<body background=" 画 代 の 8 ん ">ー</body> 


ITO か で り 【 り rd) 19173( の る 
筆 HTML で 全体 











背景 と し て 使用 し た 画像 


body 要素 の background 属性 は 、 ペ ー ジ 全体 の 背景 に 、 指定 し た 画像 を タイ ル 状 に 並べ 
て 表示 し ます 。 

背景 画像 を 設定 する 場合 に は 、 同 時 に 文字 色 と 背景 色 も 設定 し て お く よ う に し て くだ 
さい 。 背景 と し て 指定 し た 画像 は 、 さ ま ざ ま な 理由 に よっ て 表示 され な い 可 能 性 も あ 
り ま すし 、 ユ ー ザ ー が プラ ウザ の 設定 で 文字 色 や 背景 色 を 変更 し て いる 場合 な ど に は 、 
文字 が 読み に くく な っ て し まう 可能 性 も あり ます 。 ま た 、 同 様 の 理由 で 同時 に リン ク 
部 分 の 文字 色 も 設定 し て お く こ と を お 勧め し ます 。 
な お 、HTML で 背景 画像 を 設定 する 方 法 は 、 さ ま ざ ま な 理由 か ら 非 推 装 と きれ て お り 、 
新しい HTML の 標準 仕様 で は 使う 9 こと が で き な く な っ て いま す 。 背 景 画像 を 設定 する 
場合 に は 、 で きる だ け ス タイ ル シ ー ト を 利用 する よう に し て くだ さい 。 


EC 紳 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTMI, 4.01 Transitiona1 / /EN" 了 
"ht て p : / /www .w3 . org/TR/htm14/1oose .dtd"> 

<htm] 1ang="]a"> 

<head> 

<meta htp-equ1V="Content-Type" conEent="text/htm1 : 内 
charset=Sh1ft JTS"> 

<t1t1e>HTML で 全体 の 背景 画像 を 設定 する </t1t1e> 

</head> 

<body_ text 上 ="#006600" bacjkground="pineapp1e.]pg" bgco]1or="#FFFFfFfF"> 

<h1> 背景 画像 </h1> 


<D> 





























14 本 的 な 内 容 





body 要素 の background 属性 を 使用 する と 、 ペ ー ジ 全体 の 背景 画像 を 設定 する こと が で きま す 。 
く /p> 

</body> 

</htm1> 
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2 スタ イル シー ト : 「 痛 景 」 の [背景 画像 を 指定 する ](P227) 。 
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HTML4 で 非 推奨 の 要素 と 属性 は すでに 廃止 され て いる !? 

1997 年 の 12 月 に W3C の 勧告 と し て 公開 され た HTML4.0 の 仕様 書 で は 、 そ 
れ ま で 利用 され て いた 主 に 表示 に 関す る 指定 を する た め の 要 素 や 属性 を 「 非 推奨 と 
し 、 そ れ ら が 将来 的 に 廃止 され る 予定 で お る こと を 示し まし た 。 そし て 、 そ れ ら を 
実際 に 廃止 する まで の 移行 期間 胃 と し て 、HTML4.0 の 本 来 の 形 で ある 「Strict」 と 
いう 形式 の 他 に 、 非 推奨 の 要素 や 属性 も 利用 で きる 「Transitionall、 フ レー ム を 利 
用 で きる 「Frameset] と いう ふた つの 形式 も 用 意 し まし た 。 その 後 、HTML は XML 
に よっ て 再 定義 され 、2000 年 1 月 に は XHTML 1.0 と し て 公開 され まし た が 、 こ 
の 時 点 で も まだ 「Transitional] と 「Frameset」 の 形式 は 利用 で きる よう に な っ て い 
まし た 。 し か し 、 ら 001 年 の 5 月 に 勧告 と し て 公開 され た XHTML 1 .1 で は 、 つ い 
に 「Transitional] と 「Frameset」 と いう 形式 が な く な っ て し まい 、 結 果 と し て 
「Strict」 と 同様 の 形式 だ けが XHTML1.1 と いう こと に な っ た の で す 。 つ まり 、 廃 
止 予 定 と され て きた 要素 と 属性 お よび フレ ー ム が 、XHTML 1.1 で つい に 廃止 され 
て し まっ た と いう こと に な り ま す 。 


的 
上 
容 
了 
定 
す 
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※ た だ し 、 廃 止 され た 機能 も モジ ュー ル と いう 形 で は 残さ れ て いま す の で 、 文 書 型 
を 定義 けれ ば 使う こと も 可能 と な っ て いま す 。 








目的 に 応じ て 鞭 囲 を 設定 する 
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Internet Explorer 6.0 Firefox 1.0 


ホー ム | 更新 博 報 | 会 社 要 要 | 製品 情報 | 近 用 情報 
Copyright @2001 - 2005 Divjnc 


ホー ム | 更新 情報 | 会社 要 要 | 製品 情報 | 採用 情報 
Copyright @ 2001 - 2005 DiwInc。 





div 要素 は それ が プロ ッ ク レ ベル の 要素 で ある こと を 、 span 要素 は それ が イン ライ ン の 
要素 で ある こと を 示し 、 他 に は 要素 と し て の 意味 を 特に 持っ て いま せん 。 

これ ら の 要素 は 、HTML で 用 意 さ れ て いる 他 の 要素 で は 示す こと が で き な い よう な 範 
囲 を 必要 に 応じ て 設定 し 、 そ の 部 分 に 対し て スタ イル シー ト を 適用 し た り 、 言 語 の 種 
類 を 示す 場合 な ど に 利用 きれ ます 。 


EETTTE 間 史 -- ーー ーー 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN" 
"http : / /Www .w3 . org/TR/htm14/1oose .dtd"> 了 | 
<htm] 1ang="]a"> 
<head> 
<meta htEp-equiv="Content-Type" conEent="text/htm]: charset=Shift JTS"> 
<tit1 e> 目的 に 応じ て 範囲 を 設定 する </tit1e> 
<sty1e type="text/css"> 
で ! ニー 
#Footer ( ext-a]ign: center } 
ーー 
</ sty1e> 
</head> 
<Dbody> 
) 
<diy 1d="Footer"> 
<Pp> 
<a href="index.htm1"> ホ ー ム </a> | 
<a href="wEnew .htm1 "> 更新 情報 </a> 
<a href="about .htm1 "> 会 社 概要 </a> 
<a href="prdoct .htm1 "> 製品 情報 </a> 
<a href="reort .htm1 "> 採用 情報 </a> 
く /p> 
<p>Copyright gcopy: 2001 - 2005 DiY, Tnc .</p> 
</d1 マ > 
</body> 
</htm1> 





Internet Explorer 6.0 
等 ( 柏 〉 シ ュ ウ ワ 社内 ニュ ー ス - Microsoft Internet Explorer ロ 


ファ イル 杜 集 ) 表示 お 気 に AO⑳ ウー ル D AM プ 0⑪ 
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[最終 更新 日 :2001 年 11 月 2s 日 < ] [最終 更新 日 :2001 年 11 月 28 日 ( 水 ) ] 
さて . 今月 の … さて 、 今月 の … 


Opeya6 





HTML ソー ス の 中 に コメ ント を 入れ て お く 場 合 に 使用 し ます 。 

この 部 分 が プラ ウザ で 表示 され る こと は あり ませ ん し 、 機 能 的 に も 一 切 影 響 を 与え ませ 
ん の で 、 ペ ー ジ 更新 時 の 注意 書き な ど を 入れ て お く と 便利 で す 。 コ メン ト に は 任意 の 文 
字 を 入れ る こと が で きま す が 、 コ メン ト 文 中 に ハイ フン を 連続 し て 入れ る こと ([「--」 な 
ど ) は 避け て くだ さい 。 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 0 
"http: / /www .w3 .org/TR/htm14/1oose .dtd"> 

<htm1] 1ang="]a"> 

<head> 

<meta htEp-equ1iv="Content-Type" 1 2 
charset=Shift JTS"> 

<tit1e> (株 ) シュ ウ ワ 社内 ニュ ー ス </tit1e> 

</head> 

<body> 

<h1> 社内 ニュ ー ス </h1> 

く D> 

<! -- 較 較 画 更新 時 に は 、 以 下 の 行 も 忘れ ず に 修正 ! 還 軒 時 --> 

[ 最終 更新 日 :2001 年 11 月 28 日 ( 水 ) ] 

< く /p> 

く D> 

さて 、 今月 の … 

< く /Dp> 

< く /body> 

</htm1> 
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E 了 と と アル リル イト イリ と は は コリ k 主 ヨコ け )/ フィ ッ シ ン ガバ パパ の 小 て 色 り を 楽し お 


tdtle 要素 は 、HTML 文書 に タイ トル を 付け ます 。 

この 要素 は 、<head> ~ head> の 範囲 内 に 必ず ひと つ 入 れ て お く よ う に し て くだ さい 。 
ここ で 指定 し た タイ トル は 、 一 般 的 な プラ ウザ で は ウィ ンド ウ の タイ トル バー に 表示 
され る ほか 、「 お 気に入り 」 や 「 ブ ッ ク マ ー ク 」 と し て 登録 し た 場合 の タイ トル に も な り 
ます 。 タ イト ル を 付け る 場合 に は 、 そ れ だ け を 見 て ペー ジ の 内 容 が 想像 で きる よう な 
も の に し て お く と よい で し ょ う 。 た と えば 、 検 索 の 結果 と し て 一 覧 表示 され た 場合 な 
ど に 、 タ イト ル が 「 は じ め に 」 だ け で は 内 容 が 想像 で きま せん し 、「 会 社 概要 ] で は どこ 
の 会 社 の 概要 な の か が わか ら な い 状 態 と な り 、 見 て も ら え る 確率 も 低く な り ま す 。 特 
に トッ プペ ー ジ 以外 の ペー ジ の タイ トル を 付け る 場合 に は 、 注 意 し て くだ さい 。 


EYE 提 史 ーー ーー ーー 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 ON 
"hp : / /www .w3 . org/TR/htm14/1oose .dtd"> 
<htm] 1ang="]a"> 
<head> 
<meta http-equiv="Content-Type" 6 
charset=Shift JTS"> 
<tit1e> フィ ッ シ ン グ パ パ の 小樽 で 釣り を 楽し む 方 法 ! </tt1e> 
</head> 
<body> 
0 
</body> 
</htm1> 
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meta 要素 の charset 属 性 は 、 そ の HTML 文書 が 、 ど の 文字 コー ド で 書か れ て いる か を 示 三 計 
| 関 応 彗 5-m 
文字 コー ド 名 は 、 大 文字 で 書い て も 小文字 で 書い て も か まい ませ ん 。 実際 に 作成 し た 本 軸 
HTML 文書 の 文字 コー ド と meta 要素 で 指定 する 文字 コード が 違っ て いる 場合 に は 、 文 /-/oge 
字 化 けし て し まい ます の で 、 注 意 し て くだ さい (Windows な どの 一 般 に 広く 使わ れ て い 

る パソ コン で は 、 シ フト JIS が 採用 きれ て いま す )。 

な お 、 こ の 要素 は 必ず <head> </head> の 範囲 内 で 、tiue 要素 な ど で 日 本 語 が 現われ 

る 部 分 より も 前 に 配置 し て くだ さい 。 


ET 弓 人 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN" 交 
"http: / /www .w3 . org/TR/htm14/1oose .dtd"> 

<htm] 1ang="]a"> 

<head> 

<meta http-equiv="Content-Type" content="Eexxt /htm1 生 
charse=ShifF JTS"> 

<tit1e> 文字 コー ド を 示す </tit1e> 
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meta 要素 の name 属性 は 、content 属性 を 使っ て 、 そ の ペー ジ の 制作 者 名 や 内 容 の 紹介 、 
概要 、 キーワー ド な ど を 指定 し ます 。 

キー ワー ド は 、 半 角 の カン マ (.) で 区 切っ て 、 複 数 指定 する こと が で きま す 。 こ れ ら の 
情報 は 、 画 面 上 に は 表示 され ませ ん が 、 サ ー チ エン ジン が 情報 を 収集 する 場合 な ど に 
利用 され ます 。 特 に 、 キ ー ワ ー ド と し て 与え る 言葉 は 、 そ の ペー ジ が うま く 検 索 さ れ 
る か どう か に も 関係 し て きま す の で 、 慎 重 に 考え て 指定 し て くだ さい 。 

な お 、 こ れ ら の 要素 は <head> </head> の 範囲 内 に 配置 する 必要 が あり ます 。 


EE 一 


<!DOCTYPE HTMTL PUBLTC "-//W3C//DTD HTML, 4.01 72 
"http: / /www .w3 . org/TR/htm14/1oose .dtd"> 
<htm] 1ang="]a"> 
<head> 
<meta http-equiv="Content-Type" 人 
charse 上 =Sh1Ft_JTS"> 
<meta name="author" content=" 大 藤 幹 "> 
<meta name="desoription" oontent="HTML の meta 要素 に 関す る 解説 "> 
<meta name="jkeywords" content="META,meta 要素 , メタ デー タ , HTML"> 
<tit1e> 検索 され や すい ペー ジ の 作り 方 </tit1e> 
0 
</head> 
<body> 
) 
</body> 
</htm1 > 
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スタ イル シー ト や スク リプ ト の 言語 を 示す 
<meta http-equiv="Content-Style-Type'" content=" スタ アプ 
ル シ ー ト の 狂 類 "> 
<meta http-equiv="Content-Script-Type' content=" ス クリ 
プ ト た の 狂 類 "> 


【 ス タイ ル シ ー ト の 種類 


text/CSS CSS (Cascading Style Sheet) 
を が ルル さき の 上 | 
text/javascript JavaScript 


その HTML 文書 内 で の 、 ス タイ ル シ ー ト や スク リプ ト の デフ ォ ル ト の 言語 を 設定 し 
ます 

style 属性 を 使用 し て 要素 に 直接 スタ イル シー ト を 指定 する 場合 や 、 イ ベン ト 属 性 (イベ 
ント ハン ドラ ) で 要素 に 直接 スク リプ ト を 書き 込む よう な 場合 に は 、 そ れ ら の 言語 の 種 
類 を 特定 する た め の 情 報 が あり ませ ん 。 ス タイ ル シ ー ト や スク リプ ト で 、 そ の よう な 
使い 方 を する 場合 に は 、 必 ず デ フォ ルト の 言語 を 指定 し て お く よ う に し て くだ さい 。 一 
般 的 な 環境 で は 、 特 に デフ ォ ル ト の 言語 を 指定 し な く て も 、 ス タイ ル シ ー ト は CSS、 ス 
クリ プ ト は JavaScript と し て 認識 され る よう で す が 、 指 定 し て お く の が 正しい 方 法 で す 。 
な お 、 こ れ ら の 要素 は <head> </head> の 範囲 内 に 配置 する 必要 が あり ます 。 


DU 際 oo 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN" ] 


"htDp : / /www .w3 . org/TR/htm14/1oose.dtd"> 3 リ 
<htm] 1ang="]a"> 
<head> 


< く meta http-equiv="Conten-Sty1e-Type" content="Eext/Cg8"> 
<meta http-equiy="Conten-Sorip-"mype" Con も ent="exkt / ゴ avaSCrip モ "> 
<meta http-equiv="Content-Type" conten="text/htm1: っ 
charset=Sh1ift_JTS"> し 
<tit1e> スタ イル シー ト や スク リプ ト の 言語 を 示す </tit1e> 
) 


</head> 

<body sty1e="margin: 2em" onLoad="alert ( "読み 込み 完了 ! ') "> 
) 

</Dbody> 

< く /htm1> 


t スタ イル シー ト : [CSS の 組み 込み 」 の 「 任 意 の 要素 に style 属性 の 値 と し て 組み 込む 」 (P.188) 
JavaScript : 「JavaScript に つい て 」 の 「 イ ベン ト ハ ンド ラ 」 (P.306) 
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| /E6.0 | 
| /E5.0 | 


関連 する 他 の ペー ジ を 示す 





740 <linjk rel=" 肢 大 "href=" "> 

| Ziefox <link rev=" 周作 "href=" 0 胡 "> 

= Fee 

| AZX 議 還 1 この ペー ジ か ら 見 た 、UHL で 示し た ペー ジ と の 関係 
較 7 あ 信 肛 BV UHL で 示し た ペー ジ か ら 見 た 、 こ の ペー ジ と の 関係 
| AM4.X | 

Opeya/ 

Ope/a6 






ML 衣 : 第 2 lnk 飲 索 - Op | 同 孤 
イル) 赴 集 (⑰) 表示 移動 O) プッ ー ク ⑤ メー ル ⑯⑩ チャ ッ ト ウー ル ウィ ンド 2 へ ルル 2⑪ 店 本 天 
ニ ィ と 人 anw 還 ・ 





wwwsaw 用 


link 要素 は 、 そ の 文書 に 関連 する 別 の 文書 と 、 そ の 関係 を 示し ます 。 

た と えば 、 前 の ペー ジ や 次 の ペー ジ 、 目 次 の ペー ジ 、 外 国語 バー ジョ ン 、 別 ファ イル 
の スタ イル シー ト な ど を 示す 場合 に 使用 きれ ます 。 rel 属 性 と rev 属 性 に 指定 で きる 値 
に つい て は 、 右 ペー ジ の TIPS「 ペ ー ジ 同士 の 関係 を 表す 値 ] を 参照 し て くだ さい 。 現在 
の と ころ 、 一 般 的 な 多く の プラ ウザ で は 、 こ こ で 指定 し た 情報 を 利用 で きる よう に は 
な っ て いま せん 。 し か し 、Mozilla や Opera 7 の ほか 、 テ キス トブ プラ ウザ の Lynx で は ナ 
ビ ゲ ー シ ョ ン シ ス テム と し て 利用 で きま すし 、 こ れ ら の 情報 は サー チエ ンジ ン な ど に 
も 利用 きれ て いま す 。 

な お 、Hlink 要素 は 必ず <head> </head> の 範囲 内 に 配置 する よう に し て くだ さい 。 


陣 





間 和 ss 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN" 


httD: / /Www .w3 . org/TR/htm14/1oose .dtd"> 
<htm] ]ang="]a"> 
<head> 
<meta htEtp-equiv="Content-Type" conEten="Etext/htm] : 
charset=Sh1Ft JTS"> 
<tit1e>HTML 解説 : 第 2 章 11ink 要 素 </tit1e> 
<1ink re1="contents" hreF="moku]1.htm1"> 
<1infk re1="prevtous" hreF="chapter1 .htm1"> 
<1ink re1="next" hreF="chapter3 .htm1"> 
</head> 
<body> 
<h1> 第 2 章 11ink 要 素 </h1> 
) 
</body> 
</htm1> 


由 


< 
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スタ イル シー ト : [CSS の 組み 込み | の 「CSS の 書か れ た ファ イル を 読み 込む ](P.183) 。 


ペー ジ 同 士 の 関係 を 表す 値 

link 要 素 と a 要 素 で は 、rel 属 性 と rev 属 性 を 使用 し て 他 の ペー ジ と の 関係 を 表す 
こと が で きま す 。 そ の 関係 を 示す 値 と し て 、HTML4.01 で は 以下 の も の が 定義 さ 
れ て いま す ( 値 は 大 文字 で 書い て も 小文字 で 書い て も か まい ませ ん ) 。 


値 





別 バ パー ジョ ン 

別 フ ァイル の スタ イル シー ト 
最初 の ペー ジ 

次 の ペー ジ 


Alternate 
Stylesheet 
Start 

Next 


Prev 前 の ペー ジ 


Contents 目次 

Index 索引 

Glossary 用 語 集 

Copyright 著作 権 に 関す る ペー ジ 
Chapter 章 

Section 節 

Subsection 項 

Appendix 付録 

Help ヘル プ 

Bookmark 同一 文書 内 で の ジャ ンプ 先 
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base 要素 は 、 そ の ペー ジ で 使用 する 相対 URL の 基準 と な る 絶対 URL を 設定 し ます 。 
この 指定 を 行う と 、 以 隆 そ の ペー ジ で 指定 する 相対 URL は 、 す べ て ここ で 指定 し た 絶 
対 URL を 基準 と し た も の と し て 認識 され ます 。 こ の 指定 を 行わ な か っ た 場合 に は 、 現 
在 の ペー ジ の 位置 が 基準 と な り ます 。 target 属 性 を 指定 する と 、 リ ンク 先 の ペー ジ を 開 
く デ フォ ルト の フレ ー ム や ヤ ウ ィ ンド ウ を 指定 する こと が で きま す 。 

な お 、base 要素 は <head> - </head> の 男 囲 内 で 、 相 対 URL を 指定 する 他 の 要素 より も 
前 に 配置 する よう に し て くだ さい 。 


※ 下 の 例 の 場合 、 相 対 URL「../intro/url.htmll は 、 以 下 の 絶対 URL に な り ま す 。 


htp : / /www .basesample .com/ inEro/ur] .htm1 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN" 
"htp : / /www .w3 . org/TR/htm14/1oose.dtd"> 4 

<htm]1 1ang="]a"> 

<head> 

<base hreE="http: / /www.basesamp1e .com/htm1 /1ndex .htm1"> 

<meta http-equ1v="Content-Type" content=" て text /htm] : 
charset=Shift_JTS"> 向 | 

<tit1e> 基準 URL を 設定 する </tit1e> 

</head> 

<Dbody> 

く D> 

基準 と な る <a href=". ./1ntro/ur1 .htm1 "> 絶対 URL</a> を 設定 し ます 。 

く /p> 

</body> 

</htm1> 
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べ こ いぬ 」 は 移動 し まし た | 「 べ こい ぬ 」 は 移動 し まし た 
Sa ね / 
リネ 


オン ライ ン 繧 本 「^ へ CDMSIRWCUNUE 間 に オン ライ ン 絵 本 「 べ こい ぬ 」 は 以下 の URL に 移動 し まし た 。 
新 URL: http//www phoenbc or jp/ spc/bekoinu/ 新 URL: Http://www.phoenix-c-or.jp/ zspc/bekolnu/ 








/E4-max 
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指定 し た 秒 数 後に 、 自 動 的 に ペー ジ の 読み 込み を 開始 し ます 。 

移動 先 の URL を 指定 し た 場合 は その ペー ジ を 読み 込み ます が 、 指 定 し て いな いり 場合 は 
同じ ペー ジ を 再度 読み 込み ます 。 こ の 要素 は 、<head> - </head> の 範囲 に 配置 し て く 
だ さい 。 こ の 機能 は 、 ペ ー ジ の URL を 変更 し た 場合 な ど に 元 の 古い ペー ジ (「 引 っ 越し 


で きる わけ で は あり ませ ん 。 自動 的 に 別 の ペー ジ に 移動 させ る 場合 に は 、 そ の ペー ジ 
へ の リン ク も 付け て お く と よい で し ょ う 。 
た だ し 、 ア クセ シビ リティ を 考慮 する の で あれ ば 、 こ の 機能 は 利用 し な いで くだ さい 。 
そし て 、 代 わり に サー バー 側 で 処理 を 行う か 、 通 常 の リン ク で ユー ザー が 望ん だ 時 に 
移動 や 更新 が で きる よう に し て くだ さい 。 


| まし た 」 の ペー ジ ) で よく 利用 され る も の で す が 、 す べ て の ブラ ウザ で この 機能 を 利用 
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ll 


< く !DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN" 
"hp : / /www .w3 . org/TR/htm14/1oose . dtd"> 内 

<htm1 1ang="]a"> 

<head> 

<meta http-equi マ ="reFresh" 人 PR 

OF .Jp/-zSpc/bejkoinu/"> 

<meta http-equiv="Content-Type" content="text/htm] : 

charset=Shift JTS"> 4 

<tit1e> オン ライ ン 絵 本 : べ こ いぬ </tit1e> 

</head> 

<body> 

<h1> 「 べ こい 波 」 は 移動 し まし た </h1> 

く D> 

オン ライ ン 給 本 「 べ こい 光 」 は 以下 の URL に 移動 し まし た 。<br> 

新 URL : <a href="hEtp: / /www .phoenix-c .or.Jp/-zspc/bekoinu/"> 

Http : / /Www .phoenix-c .or .Jp/-zspc/bekoinu/</a> 

< く /p> 

</body> 

</htm1> 


何 語 で 書か れ て いる か を 示す 

サン ブル の 中 で 、html 要 素 に 対し て 「lang="ja"] と いう 指定 が ある こと に お 気付 
寺 で し ょ うか 。 Iang 属性 は 、 そ の 要素 の 内 容 の 基本 と な る 言語 を 示す 属性 で 、 値 の 
「ja」 は 日 本 語 を 表し て いま す 。 つ まり 、 こ の 場合 は html 要素 の 内 容 (文書 全体 ) が 
日 本 語 で ある こと を 示し て いる と いう わけ で す 。 lang 属 性 に よる 言語 の 指定 は 、 
html 要素 に 限ら ず 、 ほ ぼ ば すべて の 要素 に 対し て 指定 で きま す の で 、 部 分 的 に 言語 が 
変わ る 場合 な ど に も 使用 する こと が で きま す 。 現在 の と ころ 、 こ の 指定 を し た か ら 
と いっ て 目 に 見 えて 変化 が ある わけ で は な いよ う で す が 、 ブ ラウ ザ の 種類 に よっ て 
は 表示 され る フォ ント な ど に 影響 が 出る 場合 も わり ます 。 

また 、 翻 訳 サー ビス (ソフ ト ) や サー チエ ンジ ン な ど 、 言 語 の 特定 が 必要 と な る も 
の に 対し て も 明確 な 情報 を 与え る こと が で きま す の で 、Ilang 属 性 は 常に 指定 し て お 
く よ う に する と よい で し ょ う 。 Iang 属 性 の 値 と し て 指定 で きる 主 な 言語 コー ド は 、 
以下 の 通り で す 。 

日 本 語 ja 韓国 語 ko 

中 国語 2h 英語 en 

アメ リナ 英語 en-US フラ シ ヌ ス 十 fr 

ドイ ツ 語 de イタ リア 語 it 

スペ イン 語 eS ロシア 語 TU 
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BPIECP2 っ | |e-*-9o( 
1 日 で 学ぶ HTML | 1 日 で 学ぶ HTML 


HTML は 、 覚え て し まえ ば 意外 と カン タン ! この ペー ジ を 読み 終 HTML は 、 覚え て し まえ は 意外 と カン タン ! この ペー ジ を 読み 終え 
BAEBZ ス EZ79 く 電 W2Ney で 08 た ら 、 あな に も デキ スト エディ タ で 玲 な Web ペ ー ジ が 制作 で きま 
* す 。 


リア 


HTML の 基礎 知識 HTML の 基礎 知識 


ここ で は 、 最低 限 理解 し て お くべ き 点 を 説明 し ます 。 ます は 、 用 ここ で は . 最低 限 理 解 し て お くべ き 上 を 説明 し ます 。 まず は 、 用 語 を 
語 を 正しく 理解 し て お きま し ょ う 。 正しく 理解 し て お きま し ょ う 。 


要素 と 属性 に つい て 要素 と 属性 に つい て 
LO 要素 と は … 








hX 要素 は 、 そ の 部 分 が 見 出し (heading) で ある こと を 示し ます 。 

1~-6 の 数 字 は 見 出し の レベ ル を 表し て お り 、<hl> が 1 番 上 の レベ ル の 大 見 出し 、<h6> 
が 1 番 下 の レベ ル の 小見出し と いう よう に 6 邊 階 まで 用 意 さ れ て いま す 。 見 出し の 階層 
に 応じ て 、 そ れ に 対応 する レベ ル の も の を 使用 する よう に し て くだ さい 。 一 般 的 な ブ 
ラウ ザ で は 、 上 の レベ ル の 見 出し ほど 大 き な 文 字 で 太字 で 表示 され ます 。 

た と え 見 出し と し て 画像 を 使う 場合 で も 、 こ の タグ で 囲う よう に し て くだ さい 。 そ う 
すれ ば 画像 を 表示 で き な い 環境 で も 、img 要素 の alt 属 性 で 指定 し た 文字 が 見 出し と し 
て 適切 に 機能 し ます 。 


<body> 
<h1>1 日 で 学ぶ HTML</h1> 
<D> 


HTML は 、 覚 えて し まえ は 意外 と カン タン ! omo | 


ぶ 計 厨 避 評 北 虎 テッ キ コ 


を 読み 終え た ら 、 あ な た も テキ スト エディ タ で 素敵 な 
Web ペー ジ が 制作 で きま す 。 

< く /p> 

<h2>HTML の 基礎 知識 </h2> 

<D> 





ここ で は 、 最低 限 理 解 し て お くべ き 点 を 説明 し ます 。 
まず は 、 用 語 を 正しく 理解 し て お きま し ょ う 。 4 
く /p> 
<h3> 要素 と 属性 に つい て </h3> 
く D> 
7 の 借 要素 と は … 
ルカ < く /p> 

WMZ.X </body> 
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見 出し が どう 表示 され る か は 決ま っ て いる わけ で は な い ! ? 

見 出し の レベ ル の 違い (h1 一 h6) は 、 必 ず し も 文字 の 大 き さ で 表現 され る わけ で 

は あり ませ ん 。 た と えば 、 テ キス トブ ラウ ザ の Lynx で は 、 上 の サン ブル を 表示 させ 
る と 下 の 図 の よう に な り ま す 。 見 出し の レベ ル を 大 き さ で は な く 、 表 示 位 置 で 示し 

て いる わけ で す 。 他 に も 、 音 声 ブ ラウ ザ の ホー ムペ ー ジ ・ リ ー ダ ー83.01 で は 、 見 

出し の 前 に 特定 の 音 を 出し て 、 し か も ゆっ くり と 読み 上 げ る な ど 、 ブ ラウ ザ や 環境 

に よっ て 見 出し の 表現 方 法 ま さま ざま で す 。 

font 要 素 を 使用 し て 単純 に 文字 サイ ズ を 大 きく する こと な ど で 見 出し を 表現 し て 

いる と 、 環 境 に よっ て は 見 出し と し て 認識 する こと が で き な く な っ て し まい ます の 

で 、 注 意 し て くだ さい 。 
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枯れ た 文 と モー タ に 表示 きれ る 文 還 で は どちら が 叶 紙 に 書か れ た 文章 エモ ニタ に 表示 され る 文 重 で は 、 どちら が 読み や 
みやすい て しょ 30 BE の 人 は 本 の の が 航 やれ すい で し ょ うか ? ほとん と の 人 は 、 紀 の 方 が 読み や すい と 答え る こと 
者 CS || | 

。 ( モー: 7 [ モニ タ か 
すこ で は I ど うす れ は モー (だ うれ で も 読み や すく する こと が で きる か 」 を 考え て みた 
ます 画面 上 に すき 間 な < 続く 長い 文章 は 、 見 た だ け で 読む 気 が 1 
が な ね る も の で す . 境 に よっ て は が 幸 に せま く PO か Plot 
の の 和 わかり に < で 郊 て て いら れい も 8 


り ま こ ます 。 そ > 
す 。 その よう な 意味 で は 、 段落 の 間 を 1 行 空け る (空間 を 作る ) 
要 案 の 静 方 法 は 適切 だ と 考え られ ます 。 臣 MSA は つり 1 有り 家電 


p 要素 は 、 そ の 部 分 が ひと つの 段落 (paragraph) で ある こと を 示し ます 。 

一 般 的 な プラ ウザ で は 、 こ の 要素 の 前 後に 1 行 分 の スペ ー ス が と られ て 表示 され ます 。 
この 要素 の 内 容 と し て は 、 プ ロッ クレ ベル の 要素 を 含む こと が で きま せん の で 、 注 意 
し て くだ さい 。 


Eee 


<body> 
<h1 > 読 か や すさ を 考え る </h1> 
<p> 
紙 に 書か れ た 文章 と モニ タ に 表示 され る 文章 で は 、 ど ちら が 読み や すい で し ょ うか ⑦ ほ と ん どの 人 は 、 
紙 の 方 が 読み や すい と 答え る こと で し ょ う 。 それ に は 、 さ ま ざ ま な 理由 が ある と は 思う の で す が 、 こ | 
こ で は [どう すれ は モニ タ で も 読み や すく する こと が で きる か 」 を 考え て みた いと 思い ます 。 
</p> 
<p> 
まず 、 画面 上 に すき 間 な く 続 く 長 い 文章 は 、 見 た だ け で 読む 気 が し な く な る も の で す 。 環境 に よっ て 
は 改行 幅 が 極端 に せま く 、 次 の 行 の 先頭 が わか り に くく て 読ん で いら れ な い 場 合 も あり ます 。 その 」 
よう な 意味 で は 、 段落 の 間 を 1 行 空け る (空間 を 作る )p 要 素 の 表現 方 法 は 適切 だ と 考え られ ます 。 
</p> 

) 
</body> 
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Internet Explorer 6.0 


E 本: ちえ お は 放 呈 TH 





この ダ ィ ム た に 謙 す る お 奮 /) 今 わ ダ な 大 礼 ま で 
er7gsfer@s/7/wgsysfer.Co/ の 







9 いき 

連絡 先 を 示す - Mozilla Frefox 
| ファル 林 雪 6) 表示 衝動 プッ 2 8 
この イル に 卿 チ っ お 克 い 合わ せ ば 太 まで 
』 ル gmasfe/⑳yyayysfe77.Co. 





address 要素 は 、 そ の ペー ジ の 制作 者 の 連絡 先 や 内 容 に 関す る 問い 合わ せ 先 が 書か れ て 
いる 部 分 で ある こと を 示し ます 。 

具体 的 に は 、 電 子 メ ー ル アド レス ・ 制 作者 担当 者 名 ・ 住 所 ・ 電 話 番号 ・FAX 番号 な ど 
を 示す 場合 に 使用 し ます 。 一般 的 な プラ ウザ で は イタ リッ ク で 表示 きれ ます が 、 ス タ 
イル シー ト の 指定 (fonstyle: normal) に よっ て 標準 の 字体 に 戻す こと も 可能 で す 。 

な お 、 こ の 要素 の 内 容 と し て は 、 プ ロッ クレ ベル の 要素 を 含む こと が で きま せん の で 、 
注意 し て くだ さい 。 


EE 間 IL___ 


<body> 
) 
<addresg> 
この サイ ト に 関す る お 問い 合わ せ は 下記 まで <br> 
<a href="ma11to:webmastereshuwasystem.co.Jp"> 
webmasterGshuwasysEem . Co . Jp</a> 4 
</addresgs> 
</body> 








Internet Explorer 6.0 
当 層 調 する - Microsoft 






[注意 】 ニ の 万 狂 の 識 大 区 で は 、 必ず し も 最新 版 の ブラ ウザ 
が 、 この 本 で 紹介 し て いる 内 容 を すべ て サポ ー ト し て いる わけ 
で (は あり ませ ん ,。 












【 注 意 】 こ の 原 落 の 培 上 産 座 で は 、 必ず し も 最新 版 の ブラ ウザ が 、 
AS ー ト し て いる わけ で は あり ま 


その 部 分 が 、 強 調 さ れ て いる こと を 示し ます 。 
em 要素 は 普通 の 強調 を 、strong 要素 は より 強い 強調 で ある こと を 示し ます 。 一 般 的 な 
プラ ウザ で は 、em 要素 は イタ リッ ク で 、strong 要素 は 太字 で 表示 され ます 。 


EDUH 間 隊 mm 


<D> 

<strong>【 注 意 】</ strong> 

<em> この 原稿 の 執筆 時 点 </em> で は 、 必ず し も 最新 版 の ブラ ウザ が 、 

この 本 で 紹介 し て いる 内 容 を すべ て サポ ー ト し て いる わけ で は あり ませ ん 。 4 
</p> 


q 要 素 の 対応 状況 に つい て 

Netscape 6 以降 で は 、q 要素 の 前 後に 引用 待 を 付け て 表示 する だ け で な く 、cite 
属性 で 指定 され た URL に 移動 する こと も で きる よう に な っ て いま す 。 ま た 、Opera 
や Netscape の バー ジョ ン ら 6 以降 、Firefox、Mozilla で は 、 ス タイ ル シ ー ト を 利用 


する こと で 、 引用 待 と し て 使用 する 記号 を 任意 の も の に 変更 する こと も で きま す 。 他 
に 、Macintosh 版 の Internet Explorer 5 や Safari な ど で も 引用 符 を 表示 し ます 
が 、Windows 版 の Internet Explorer は バー ジョ ン 6.0 で も 引用 符 を 表示 し ませ ん 。 
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ぶ 三 避 避 遅 貢 3 テツ ネコ 用 


短い 引用 文 を 表す 


1 つい る 


捉 い 引用 文 を 表す - Mozilla Firefox 


9G の 仁 億 に は 、 ビ ジュ アル ・ ユ ー ザ ー エ ー ジ ェ ント は q | WC の 仕様 に は 、 ビジ ュ アル ・ ユ ー ザ ー エ ー ジ ェ ント は 、 < 要素 の 

の 内 容 に 入 し て その 二 団 を 示す 3 用 生 を 付け て 表示 な けれ 内 容 に 対し て その 毅 囲 を 示す 引用 芋 を 付け て 表示 し な けれ ば な り 
ば な り ま せん と あり ます が . 直 62 病 符 を 付け な い プ ラウ ませ ん "と あり ます が 、 現在 で も 引用 符 を 付け な い ブ プラ ウザ が 存在 し 
ザ が 存在 し ます の で . 注意 し て くだ さ し ます の で 、 注意 し て くだ さい 。 


q 要素 は 、 そ の 部 分 が 、 短 い 引 用 文 で ある こと を 示し ます 。 

彼 落 の 一 部 な ど ( イ ン ラ イン 要素 ) と し て 引用 する 場合 に 使用 され ます 。 cite 属性 を 使用 
する と 、 引 用 し た ペー ジ の URL を 示す こと も で きま す 。 こ の 要素 が サポ ー ト され て い 
る プラ ウザ で は 、 指 定 し た 範囲 の 前 後に 自動 的 に 引用 符 が 付け られ ます の で 、 文 章 の 
中 に は 引用 符 を 入れ な いよ うに し て くだ さい 。 


| Samplc 還 


く D> 
W3C の 仕様 に は 、<q cite="http: //www.w3 .org/TR/htm1401"> 
ビジ ュ ア ル ・ ユ ー ザ ー エ ー ジ ェ ン ト は 、 q 要 素 の 内 容 に 対し て 

その 範囲 を 示す 引用 符 を 付け て 表示 し な けれ ば な り ま せん </q> 

と あり ます が 、 現在 で も 引用 符 を 付け な い プ ラウ ザ が 存在 

し ます の で 、 注意 し て くだ さい 。 

</p> 
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長い 引用 文 を 表す 


万 re7ox 
Moz/a 


Internet Explorer 6.0 Firefox 1.0 
独 長い 引用 文 を 表す - Micro t Ex 引 に 長い 引用 文 を 表す - Mozilla Frefox 
アイ ルル 刻 集 D 表示 ⑰ 


@ の 回 思 


た と えば 、 WGC の アク セ シ ビ リティ * ガ イド ライ ン 1.0 の 中 に は 、 次 た と えば は 、 72S20202 ガイ ドラ イン 1.0 の 中 に は 、 次 の よ 
の よう な 一 節 が あり ます 。 うな 一 節 が あり 


仕様 に 沿っ た 正しい タグ 付け を 行なっ て いな いと . 仕様 に 治っ た 正しい タグ 付け を 行なっ て いな いよ 、 アク 
アク セン ビリ ティ に 関す る 問題 を 同志 す 場 き が セ シ ビ リティ に 関す る 問題 を 引き 起こ す 場 合 が あり ま 
あり ます 。 一 般 Bq ブラ ウザ で どう 表示 され る か だ す - 一 般 的 な プラ ウザ で どう 表示 され る か だ け を 考慮 
( け を 考慮 し て 間違っ た タグ 付け を し て し RM その て 間違っ た タグ 付け を し て いる と 、 その 他 の ユー ザー・ 

ユー ザー・ エ ー ジ ェ ン ト で は ペー ジ の 構成 や 内 エー ジェ ント で は ペー ジ の 構成 や 内 容 な ど が 理解 で き 
容 な ど が 理解 で き な く な る 可能 性 が あり ます 。 な く な る 可能 性 が あり ます 。 


回 回 国 回 回 加 
に 3 に 3 に 〕 Km 


リル 消 6 


9 ソコ ドル 








blockquote 要素 は 、 そ の 部 分 が 、 長 い 引用 文 で ある こと を 示し ます 。 

文章 を 段落 な どの まとまっ た 単位 で (プロ ッ ク レ ベル 要素 と し て ) 引 用 する 場合 に 使用 
され ます 。 cite 属性 を 使用 する と 、 引 用 し た ペー ジ の URL を 示す こと も で きま す 。 こ 
の 要素 は 、 一 般 的 な プラ ウザ で は 左右 が イン デン ト さ れ た 状態 で 表示 され ます の で 、 
か つて は 左右 の マー ジン を と る 目的 だ け で 利用 され る こと も あり まし た 。 し か し 、 そ 


れ で は その 部 分 全体 が 引用 され た 文章 で ある こと に な っ て し まい ます の で 、 マ ー ジ ン 詩 還 財 
を 設定 し た い 場 合 に は スタ イル シー ト を 使う よう に し て くだ さい 。 と コ 
キ 
| Samplc 坦 還 人 
本 ト 
< く D> の 
た と えば 、 W3C の アク セ シ ビ リティ ・ ガ イド ライ ン 1 . 0 の 中 に は 、 次 の よう な 一 節 が あり ます 。 - 
< く /p> 
<b1oclfkqruote cite="http : / /www .W3 . ord/TR/WA エ -WEBCONTENT/"> 
<DP> 定 
す 
る 


が あり ます 。 一 般 的 な ブラ ウザ で どう 表示 され る か だ け を 考慮 し て 剛 違 っ た タグ 付け を し て いる と 、 
その 他 の ユー ザー・- エ ー ジ ェ ン ト で は ペー ジ の 構成 や 内 容 な ど が 理解 で き な く な る 可能 性 が あり ます 。 
</p> 

</b1ocjkquote> 


仕様 に 治っ た 正しい タグ 付け を 行なっ て いな いと 、 アク セ シ ピ リ Cm っ 22 を し て 8 と 、 | 








//7e7ox 


Moz//a 


店 同 避 評 問 黄 き テ エコ 用 









詳細 は 、 /45 の -99997 を 参照 し て くだ さい 。 






・・ 情 6 の oma 


詳細 は 、 /75O-29997 を 参照 し て くだ さい 。 





cite 要素 は 、 そ の 部 分 が 、 出 典 や 参照 先 で ある こと を 示し ます 。 
文章 を 引用 する の で は な く 、 書 籍 や 文書 、 規 格 、 著 者 な どの 名 前 や ヤ タ イト ル を 示す 場 
合 に 使用 し ます 。 一 般 的 な プラ ウザ で は 、 イ タリ ッ ク で 表示 され ます 。 


| Sonulr 生還 


<D> 
詳細 は 、<cite> [TS0-9999] </cite> を 参照 し て くだ さい 。 
く /p> 








ファ イル 編集 

GE・ の 回 回 の の w imoo 

SOHO の 方 で あれ ば TOP/IP で HAN を 組ん で し いる 人 も 多い で し SOHO の 方 で あれ は 、 TCP/IF で HAN を 組ん で いる 人 も 多い で し ょ 
まう 4 Local res Newet po 














その 部 分 が 、 略 語 で ある こと を 示し ます 。 

abbr 要素 は 略語 全般 を 示し 、acronym 要素 は 略語 の 中 で も 単語 の 先頭 の 文字 を 組み 合 
わせ て 作ら れ た も の で 、 し か も ひと つの 単語 と し て 発音 きれ る も の (NATO、SOHO、 
LAN な ど ) を 示し ます 。 title 属性 に は 、 省 略し な い 状 態 の 言葉 を 指定 し ます 。 


ET 


く D> 
<acronym 上 it1e="Sma11 OFEFice Home OFEFice">SOHO</acronym> 
の 方 で あれ ば 、<abbr tit1e="Trangmisgsion Contro1 Protoco1 / 
Tnternet Protoco1">TCP/TP</abbr> で <acronym 上 ュ it1e="Loca1 
Area Network">LAN</acronym> を 組ん で いる 人 も 多い で し ょ う 。 

く /p> 


追加 や 削除 を し た 日 時 の 表し 方 

Ins 要素 と del 要素 で 指定 する 日 時 の フォ ー マ ッ ト は 、ISOB601 に 準拠 し た 形式 
で 一 見 し た だ け で は 複雑 そう で す が 、 基 本 的 に は 年 月 日 時 分 秒 と タイ ム ゾ ー ン を 示 
す だ け で す 。 

以下 に 示す 書式 で 書け ば よい の で す が 、 年 は 4 桁 、 そ の 他 は ら 桁 で 固定 と な っ て 


いま す の で 、 注 意 し て くだ さい 。 


Time の 「T」 で 固定 日 本 時 間 の 場合 は この まま 


2001-04-19T23:14:00+09:00 
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>wwsmmszxxe 


Internet Explorer 6.0 
筆 追加 し た こと を 示す 
アイ ル ) 編集 ) 


@* の 


center 要 素 は 、 要素 内 容 を 模 方 向 の 中 心 に 配置 させ ます 。 吐 
意 】csnter 要 素 は 、 XHTML1.1 で 廃止 され まし た 。 









1913 い る 





center 要 素 は 、 人 [注意 】 
center 要 素 は 、 XHTML1.1 で 廃止 され まし た 。 





ins 要素 は 、 そ の 部 分 が 、 後 か ら 追加 し た 部 分 で ある こと を 示し ます 。 

プラ ウザ に よっ て 表示 方 法 は 異な り ま す が 、 一 般 的 に は 下線 の 付い た 状態 や ヤ イ タリ ッ 
ク な ど で 表 示さ れ ま す 。 ま た 、 プ ラウ ザ に よっ て は 、tiitle 属 性 で 指定 し た 短い 説明 を 
ツー ル チ ッ プ と し て 表示 させ る こと も で きま す 。 こ の 要素 は 、 指 定 する 範囲 に 応じ て 、 
イン ライ ン 要 素 と し て も プロ ッ ク レ ベル 要素 と し て も 使用 する こと が で きま す 。 


ET0L___ 


<Dp> 

center 要素 は 、 要 素 内 容 を 横 方 向 の 中 心 に 配置 させ ます 。 

<1ns Cite="htEp: / /www .w3 . Ord/TR/xhtm111" datetime="2001-05- 
31T22:14:00+09:00"> 4 
【 注 意 】center 要素 は 、XHTML1 . 1 で 廃止 され まし た 。 

</ns> 

く /p> 


36 テキ スト の 科 類 


削除 し た こと を 示す 


19G( い る 


前 除 し た こと を 示す - Mopz 


del 要素 は 、 そ の 部 分 が 、 後 か ら 削 除き れ た 部 分 で ある こと を 示し ます 。 
プラ ウザ に よっ て 表示 方 法 は 異な り ま す が 、 一 般 的 に は 取消 線 が 付け られ た 状態 で 表 
示 き れ ま す 。 ま た 、 プ ラウ ザ に よっ て は 、tiule 属性 で 指定 し た 短い 説明 を ツー ル チ ッ 
プ と し て 表示 させ る こと も で きま す 。 こ の 要素 は 、 指 定 する 範囲 に 応じ し て 、 イ ン ラ イ 
ン 要 素 と し て も プロ ッ ク レ ベル 要素 と し て も 使用 する こと が で きま す 。 


く D> 
<de1 cite="http : / /www .w3 . org/TR/xhtm111" qatetime="2001-05- 
31Tm21:30:00+09:00" tit1e=" ス タイ ル シ ー ト を 使用 し まし ょ う "> 由 
center 要素 を 利用 する と 、 な ん で も 簡単 に セン タリ ング で きる の て で 大変 便 利 で す 。 


</de1> 
</p> 











の 同 民 愉 北 貢 9 テキ モコ 





語 で ある こと を 示す 













4 は 、 SGML の 不要 な 機能 を 削除 し て 、 Wsb 上 で 必要 と な る 
凍 入 加 た 泊 還 的 な デー タ 記 述 言語 で す 。 1998 年 に WdC 

に よっ て 公開 され まし た が 、 すでに 多く の 企業 が この XML を 利 
用 し て デー タダ 交換 を 行っ て いま す 。 
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47 は 、 SGML の 不要 な 機能 を 削除 し て 、 Web 上 で 必要 と な る 機能 
を 追加 し た 汎用 的 な が データ 記 述 言 語 で す 。 1998 年 に W3C に よっ て 
公開 され まし た が 、 すでに 多く の 企業 が この XML を 利用 し て デー タ 
交換 を 行っ て いま す 。 






dfn 要素 は 、 そ の 部 分 が 、 用 語 の 意味 を 定義 (説明 ) し て いる 部 分 の 対象 と な る 「 用 語 ] あ 
る こと を 示し ます 。 

た と えば 、 あ る 文章 の 中 で 、 初 め て その 用 語 が 出 て くる 場合 な ど に 使用 きれ ます 。 一 
般 的 な プラ ウザ で は 、 イ タリ ッ ク で 表示 され ます 。 


<D> 


<dfn>XML</dfn> は 、SGML の 不要 な 機能 を 削除 し て 、 Sg した が すぐ CO | 


>wwsmmszusy 用 


用 的 な デー タ 記 述 言 語 で す 。1998 年 に W3C に よっ て 公開 され まし た が 、 すでに 多く の 企業 が こ 
の xML を 利用 し て デー タ 交 換 を 行っ て いま す 。 


く /p> 








31 いる 
プロ グラ ム 関 連 の 
アイ ル (E) 編集 


GR・ の 回 回 


ます は 、 コマ ンド ライ ン か ら nnm と 入力 し て み ま し ょ う 。 も し 問 違 | | ます は . コ マン ドラ ィ ン か ら DIR 入 
っ て 入力 し た 場合 に は 、 次 の よう は メッ セー ジ が 表示 され ます 。 入力 し た 場合 に は 、 次 の よう な メッ セー 


コマ ンド また は ファ イル 名 が 違い ます ・ コマ ンド また は ファ イル 名 が 違い ます . 





次 に 示す 例 の よう に 、 通常 カウ ンタ と な る 変数 に は 、 / が 使用 さ CR 人 MC08o 拓 が 2 る 雪が 2208 有 8 
れ ます 。 ・ 


for(var | In document) for(var i in document) 
document.write(i キー<b) dooument.write(i * "br の) 


kbd 要素 は 、 そ の 部 分 が キー ボー ド な どか ら 入 力 する 文字 で ある こと を 示し ます 。 samp 
要素 は 、 プ ログ ラム な ど に よっ て 出力 され る 内 容 の サン プル を 示す 場合 に 使用 し ます 。 
code 要素 は 、 プ ログ ラム な どの ソー スコ ー ド を 示す 場合 に 使用 し ます 。 ソ ー ス コー ド 
中 の 空白 に よる 字 下げ も その まま 表示 させ た い 場 合 に は 、 同 時 に pre 要素 も 使用 し て く 
だ さい 。 var 要素 は 、 変 数 や 引数 を 示す 場合 に 使用 し ます 。 

一 般 的 な プラ ウザ で は 、kbd 要素 ・samp 要素 ・code 要素 は 等 幅 フ ォ ン ト で 、var 要素 は 
イタ リッ ク で 表示 され ます 。 


| Samplp 王 還 


<D> 
まず は 、 コ マン ドラ イン か ら <kba>DTR</kbd> と 入力 し て 
み ま し ょ う 。 も し 、 間 違っ て 入力 し た 場合 に は 、 次 の 」 
よう な メッ セー ジ が 表示 され ます 。 
く /D> 
< く D> 
<samp> コマ ンド また は ファ イル 名 が 違い ます . </ samp> 
< く /p> 

) 
<D> 
次 に 示す 例 の よう に 、 通常 カウ ンタ と な る 変数 に は 、 J 
<var>1</Yar> が 使用 され ます 。 
く /p> 
<Dre> <Cod@> 
For (var 1 in documen) 

document .write(1 + "&1t:brggt: " ) 

</code></D エ Ge> 








/E6.0 
リ 了 た 】 
/ 子 / 


店 
ト 
に 


frefox. 
(の た 】 


ミ ほ 民 
回 図 較 


OperaZ 


Opera6 


Sa ね / 


夏 5-ac 
在 4-ma 


の ト 本 避 避 問 麗 せ 中 





ぶ 厨 避 避 貢 3 テコ ネコ 





ar を A 
長万部 に は 、 北海 道 の 地 名 で ある 。 


指定 し た 範囲 に ルビ (ふり が な ) を ふり ます 。 ル ビ に 関連 する 要素 は 、 す べ て <ruby> 
ruby> の 中 に 配置 し ます 。 ル ビ を ふる 対象 の 言葉 は rb 要素 で 、 ル ビ 自 体 は rt 要素 で 示 
し 、 ル ビ に 対応 し て いな い プ ラウ ザ に 備え て 、 ル ビ と な る 文字 (rt 要素 ) の 前 後に 内 容 
と し て カッ コ を 入れ た rp 要素 を 配置 し ます 。 rp 要素 の 内 容 は 、 ル ビ に 対応 し た ブラ ウ 
ザ で は 無視 され ます 。 

な お 、 ル ビ は Internet Explorer の バー ジョ ン 3 以 降 で 利用 で きま す が 、 仕 様 と し て は 
XHTML1.1 か ら 利用 で きる よう に な っ た も の で す 。 HTML4.01 や XHTML1.0 の 文書 で 
は 、 文 法 的 に は ルビ を 使用 で き な い と いう こと も 覚え て お いて くだ さい 。 


く D> 
<rubY> 

<rb> 長万部 </b> 

く エ Yp> (</ ェ エ p> 

<rt> お し ゃ まん べ </ ェ t> 
< エ p> ) </rp> 

< く /rubY> 

と は 、 北海 道 の 地名 で ある 。 
く /p> 





/E6.0 
リ 務 年 】 
/E5.0 


万 re7ox 
Moz/a 


リリ リル 
6.X 
A2.X 
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html lanetje | <html lang: "ja> 
hea ゆ 


ee | 
UKWUUIA <titlex</titley 
</heay 





<body> 
</body 





HTML で は 、「<」 と 「>]」 は タグ を 表す た め に 使用 きれ ます の で 、 そ の まま 書く と そこ が 
タグ の 一 部 だ と 解釈 され て し まい ます 。 そ の よう な 特別 な 意味 を 持っ た 文字 を 表示 さ 
せ た い 場合 に は 、[&OO:」 と いう 形式 を 使用 し ます 。 こ れ ら は 、 上 の 書式 の 通り に 必 
ず 小 文字 で 書く よう に し て くだ さい 。 実際 に は 、 こ の 他 に も さま ざま な 文字 を 表示 さ 
せる こと が 可能 で す 。 そ れ ら に つい て は 、P.174 の リフ ァ レ ンス 「HTML4.01 で 定義 さ 
れ て いる 特別 な 文字 ] を 参照 し て くだ さい 。 


EPYTE 提 EL__ 


<D> 





<Code> 

を 1t:htm] 1ang=gqruot : agquot 』 ggE 》 <D エ > 
&g1t headggt : <D エ > 

を 1t: 上 1 ヒ ]e&g : 1: / 上 ュ ヒ 1egg : <D エ > 

を 1t』 /headggt : <Dr> 

を 1t : bodyggE <D エ > 

&1t』 /bodyggt : <D エ > 

1t』 /htmlggt』 

</ code> 

</p> 


の 司 貢 本 功 テキ 





改行 させ る 


Internet Explorer 6.0 


改行 させ る - Microsoft mternet Explorer 









勤 秀 スー パパ ー・ ラ アン プレ アク 
友 六 史 天 友 却 7 案 宛 27 互 ヶ - ず 
77 の 777722-956Z 万 4 の 7 の 729ー9269 





Firefox 1.0 

Liir3-】 
アイ ル (編集) 表示 移動 ⑬) ブッ クマ ー ク (⑧) ッ 
年 - ゆ - 伯 @@ の om 避 
競 見 スー ペー・ ラ ィ ン プ シング 


衣 姜 方 史 稀 万 区 7 委 万 2 ア 与 9 
7EZ: の 7 の 723-4567 4Y:( の 7 の 723-2569 















HTML の ソー ス の 中 で 改行 し て も プラ ウザ で 表示 し た 場合 に は 反映 され ませ ん の で 、 
プラ ウザ 上 で 改行 きせ た い 場 合 に は 、 こ の 要素 を 使用 し ます 。 た だ し 、 改行 が で きる 
か ら と いっ て 、 こ の 要素 を 使用 し て 段落 を 表現 する よう な こと は 避け て くだ さい (段落 
を 示す に は 、 p 要素 を 使っ て くだ さい )。 ま た 、 ユ ー ザ ー は 必ず し ゃ 制作 者 と 同様 の ウィ 
ンド ウ 幅 や 文字 サイ ズ で 見 て いる と は 限り ませ ん の で 、 整 形 や ヤレ イア ウト を 目的 と し 
て 改行 する よう な 場合 に は 、 注 意 し て くだ さい 。 


三 三 
5 br 要素 を 入れ る と 、 テ キス ト が そこ で 改行 され ます 。 
る 


<addresS> 

釣具 スー パー・ ラ イン ブレ イク <br> 

札幌 市 中 央 区 北 1 条 西 2 丁目 3-4<br> 

TEL : (011)123-4567 FAX : (011)123-4568 
</address> 








還 
の 
ご 


LE ルネ きつ) 


<hY> 

<hr size=" 太 さ " width=" 長 さ " align=" 彰 え 位置 " noS カ ade> 
SiZe 肢 線 の 太 さ (ピク セル ) 
width 暑 線 の 長 さ (ピク セル ・%) 
align 行 揃え 位置 (left ・right ・center) 


noshade 有野 線 を 平面 的 に 表示 


Internet Explorer 6.0 3 いる 
記 模 和 認 を 入れ る - Microsoft internet Explorer 【 棋 吾 線 を 入れ る - Mozilla Firefox Ia 
アイ ル (P 編集 ( 表示 ⑦ お 気 に 和 AD⑳ ツウ - ル D へ JI プ ⑪ イル) 還 集 ( じ 表示 Gy 本 ⑬ プッ 2 マー2GG) ツーMD へ ルプ ⑪ 


@ 京 ・ の 回 回 人 の の ws 云 sm2p 和 を - ゅ - 條 の 9@6owle 

















hr 要素 を 入れ る と 、 そ こ に 横 時 線 が 引か れ ま す 。 

一 般 的 な ブラ ウザ で は 、 引 っ 込ん だ 感じ で 立体 的 に 表示 され ます が 、 noshade 属性 を 指 
定 す る と 単純 な 塗り つぶ し の 線 に する こと が で きま す 。 size 属性 は 線 の 太 き を 、width 
属性 は 線 の 長 さ を 設定 し ます 。width 属性 は 、 単 位 を 付け な けれ ば ビク セル 数 と し て 認 
識 さ れ 、 単 位 と し て 「%」 を 付け る と ウィ ンド ウ の 幅 に 対す る 割合 と な り ま す 。 align 属 
性 は 時 線 の 行 揃え を 設定 し ます が 、 何 も 指定 し な い 場合 は 一 般 に 「centerl に な り ま す 。 
た だ し 、 こ れ ら の 属性 は すべ て 非 推 状 と きれ て お り 、 新 し い HTML の 標準 仕様 で は 使 
うこ と が で き な く な っ て いま す 。 表示 方 法 を 指定 する 場合 に は 、 で きる だ け ス タイ ル 
シー ト を 利用 する よう に し て くだ さい 。 ス タイ ル シ ー ト で ボッ クス の 枠 線 を 表示 させ 
る と 、hr 要 素 を 使用 し な く て も 時 線 を 表示 させ る こと が で きま す 。 


<hr size="10"> 

<hr size="20" width="20"> 

<hr size="5" width="50%" a1ign="1eF モ "> 
<hr size="5" width="50%" a1ign=" エ 1ght"> 
<hr noshade> 

<hr noshade size="10"> 


(2 スタ イル シー ト : 「 ボ ックス 」 の 枠 線 に 関連 する プロ バテ ィ (P.24 1 一 248) 





Im 
に 1 
Ku 


ミ 
R NG 
全 


= 周 
回 国民 
S に 】 


OpeyagZ 
Ope/a6 


< 区 区 


Sa ね // 
圧 5-mac 


リア (3 


計 
表 
方 
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る 





/E5.5 
/E5.0 
リ 務 和 / 


//re7ox 
Moz/a 
リル 


き 
< 


2.X 


OpeyaZ 
Ope/a6 





>-waswwiy | 


テキ スト の スタ イル を 指定 する 














<b> 一 </b> 條 太字 
<i>ー</ 征 イ タリ ッ ク 
<tt> 一 </tt> 人 征 等 違 フ ォ ン ト 
< く SuDp> 一 く / SUD> 傘 上 付 文字 
<Sub> 一 </sub> 全 下 付 文字 
<u> 一 </u> 符 下 線 

< く S> 一 </8> 欠 取 消 線 
<Strike> 一 </strilke> 人 征 取 消 線 







Internet Explorer 6.0 
P を よき リル も ちの た る す : 
イル) 編集 ⑤ 


の 回 較 人 の の 只 宮 sm2p 






これ は 太字 Bold〉 
これ は アタ ソック (za を ) 
これ は 箸 幅 フォ ント (Teletype) 
これ は 土 付 文 字 ⑮uperscrpt) 


これ は で xsusereo 


これ は 下線 (Underlinsd) 
これ は 陳 : 1 


これ は 取消 線 CStrike-throgghy 


















9 いる 






テキ スト の スタ イル を 指定 する - Mozilla Firefox 本 回 四 
アイ ル ⑥ 編集 (D 表示 ⑰ 移動 ⑬⑮ ブッ クマ -2⑧) ツー ル ①D AM2B 8 


を - ゆ -@ の G@ の om 


これ は 太字 (Bold) 

これ は プイ タグ ッ グ (7fg/c) 

これ は 等 幅 フ ォ ン ト (Teletype) 
上 仏文 字 ( jpt) 

これ は 付 文字 (Superscrpt 

に と て CT 

これ は 下線 (Underlined) 

これ は 取 = 

これ は 取 浴 線 (Sbike=throushy 




















指定 し た 範囲 の テキ スト の スタ イル を 指定 し ます 。 

これ ら の 要素 は 、 文 書 構造 と し て の 意味 は 持っ て は いま せん が 、HTML で は 該当 する 
適切 な 要素 が な い 場合 や 、 プ ラウ ザ が 使い た い 要 素 を サポ ー ト し て いな い 場 合 な ど に 、 
補助 的 に 使用 する と 便利 で す 。 

な お 、 こ れ ら の 要素 の うち 、u 要 素 ・s 要素 ・strike 要素 は 非 推 と され て お り 、 新 し い 
HTML の 標準 仕様 で は 使う こと が で き な く な っ て いま す 。 た と えば 、 強 調 の た め に 下 
線 を 引き た い の で あれ ば em 要素 や strong 要素 を 、 内 容 を 取り 消し た (削除 し た ) こ と を 
示す た め に 取消 線 を 引き た い の で あれ ば del 要素 を 使用 する な ど し て 、 ど の よ うに 表示 
する か は スタ イル シー ト で 指定 する よう に し て くだ さい 。 


4 スタ イル と レイ アウ ト 


ELL 上 上 ト 上 トト トト トト ニニ 


<D> リ 久 】 
これ は <pb> 太字 (Bo1d ) </b><br> た 5.0 
これ は <i> イタ リッ ク (Tta1 ic ) </ ミ ><Dr> 2.0 


これ は <tt> 等 幅 フ ォ ン ト (Te1etype ) </ 上 モ ><D エ > 

これ は <sup> 上 付 文字 (Superscrip ) </ gup><b エ > 
これ は <sub> 下 付 文 字 (Subscript ) </ sub><b エ > 

これ は <ux> 下線 (Under11ned) </u> <b エ > 

これ は <sz> 取消 線 (Strike-through ) </ 8><D エ > 

これ は <striike> 取消 線 (SLr1ke-Ehrough ) </ st 上 rijke> 
</p> 


Sa ね 
圧 5-m 


圧 4-ma 
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万 e7fox 
| Moza 
寺 AMZX 
6.X 
M4.X 

















Sa ね 
圧 5-7ma 


リマ 





細 





1 いづ い (っ 9 いで り 【 り っ まり 
圭 空 白 や 改行 を その まま 表示 










function resetRedio() 【 
for(yar | = 0: | < document.form1.type.lengthi itt) 【 
if(document.form1.type[i].defaultChecked == true) 
document .forml.type[l].checked = true 
else 
document forw1.type【i].checked = false 








9 いき 









function resetRadio() [ 
for(var i = 0: 1 く document.foml.type.lengthi ir)【 
『(dooument .forml .type[i].defaultChecked == true) 
document .forml .type[i].checked = true 
else 
document .forml.type[i].checked = false 






pre 要素 は 、 指 定 し た 範 団 の テキ スト を 、 入 力 し た 通り に 等 幅 フ ォ ン ト で 表示 し ます 。 
具体 的 に は 、 ス ペー ス と 改行 が 入力 し た まま の 状態 で 表示 され 、1 行 の 長き が ウィ ンド 
ウ の 幅 よ り 長 く な っ て も 自動 的 に 改行 きれ な く な り ま す 。 主 に ソー スコ ー ド な ど を 表 
示さ せ た い 場合 に 使用 し ます が 、 タプ は 入れ な いよ うに し て くだ さい 。 


|Samplo 王 呈 還 


く p エ @><COQG> 
funcEion reseERadio() { 
For(var i = 0: 1 &1t: document . form1 .type.1ength: ++) { 
if (document . Form1 . type [1] .deFau1tChecked == true ) 
document . Form1 .type [1] .checked = true 
else 
document . form1 .type [1] .checked = False 


} 
< く /Code></pre> 
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191G 〇 いる 


セン タリ ング する 


ング する 


テキ スト は も ちろ ん 、 
画像 も テー プル も 中 央 に 表示 し ます 。 
限 素 名 | 説明 | 備考 
crtr 陸 ン タリ ング 降 推 奨 要素 





center 要素 は 、 指 定 し た 範囲 の 内 容 を セン タリ ング し て 表示 し ます 。 

プロ ッ ク レ ベル 要素 か イン ライ ン 要 素 か を 問わ ず に 、 ほ と ん どの 要素 を セン タリ ング 
する こと が で きま す 。 

た だ し 、 こ の 要素 は 非 推奨 と きれ て お り 、 新 し い HTML の 標準 仕様 で は 使う こと が で 
き な く な っ て いま す 。 セ ンタ リン グ し た い 場 合 に は 、 で きる だ け ス タイ ル シ ー ト を 利 
用 する よう に し て くだ さい 。 


本 
7 
EYE0 昌 し し ーーーーーーーーーーーーーー 示 
<Center> 婦 
を 


<h1> セン タリ ング する </h1> 

<D> 

<1mg Src="1mage.]pg" Width="128" height="100" a1t=" "><br> 
テキ スト は も ちろ ん 、<br> 画像 も テー ブル も 中 央 に 表示 し ます 。 

く /p> 

<tab1e border="1 "> 

< 上 テ > 

<th> 要素 名 </th><th> 説明 </th><th> 備考 </th> 

く / 上 エッ > 

く 上 エッ > 

<td>cenEter</td><td> セン タリ ング </td><td> 非 推奨 要素 </ td> 
</ て 上 エ > 

</ tab1e> 

</Cente ェ > 
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/E6.0 
5.5 


53 行 背 え を 指定 する 


/E4.0 <h 1 aligm=" 靖 え 位置 ">ー</h1> 
刀 ire7ox <D agm=" 行 析 え 位置 ">ー</p> 
Moz/a <div aHign=" 歴 意 え 位置 "> 一 く </ div> 





行 揃え 位置 left・right ・center 
※h1 だ け で な く 、h1 一 h6 で 利用 で きま す 。 


Ope/aZ 
Opeya6 


Internet Explorer 6.0 191G( い る 


代行 拓 え を 指定 する - Microsoft Internet Explorer 
イル) 還 (5) 表示 お 気 に 和 AD ウール D へ ルプ ⑪ 


O*・ の 回避 人 の の wm 到 Peoo 
左 揃 え 


align= le 作 


| 

ま 
上 回 
に ゴト 3 トコ 


アル 雪 6) 表示 移動 ⑪ プッ クマー2⑧ ツー ル D AM 8 


Sa ね / を - ゆ -@G@ の omwe 


|. 條 5-mac 
4.nmt 。 


mode 





中 央 揃え 


align=center 


中 央 揃 え 


allgn="center" 


右 摘 え 


allgn=right" 





align 属性 を 使用 する と 、 見 出し (hi 一 h6 要 素 ) や 段落 (p 要素 )、 指 定 し た 範囲 (div 要 
素 ) の 行 揃え を 指定 する こと が で きま す 。 

行 捕え 位置 と し て 指定 する 「eftl「rightl「centerl は 、 そ れ ぞ れ 「 左 揃え ]「 右 揃え 」「 中 央 揃 
え 」 を 表し て いま す 。 

た だ し 、 こ の align 属性 を 使用 する こと は 非 推 巻 と され て お り 、 新 し い HTML の 標準 仕 
様 で は 使う こと が で き な く な っ て いま す 。 行 捕 え を 指定 する 場合 に は 、 で きる だ け ス 
タイ ル シ ー ト を 利用 する よう に し て くだ さい 。 


| Samnlo 王 還 


<h1 a1ign="1eft"> 左 揃え </h1> 

<p  a1ign="1eft">a11gn=" ef 上 "</p> 

<h1 a1ign="center"> 中 央 揃え </h1> 

<p  a1ign="center">a]1gn= "Center "</p> 
<h1 a1ign="right"> 右 揃え </h1> 

<p  a1ign="right">a]11qn=" エ 1gh ヒ "</p> 


wm 関 











>) <div> : 「 基 本 的 な 内 容 ] の 「 目 的 に 応じ て 範囲 を 指定 する 」(P.16) 
<h1>:「 テ キス ト 」 の 「 見 出し を 表す 」(P.27) 
<p> : 「 テ キス ト 」 の 「 段 落 を 表す 」(P.29) 
スタ イル シー ト :「 テ キス ト 」 の 「 行 揃え を 指定 する 」(P.214) 
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= ama 


文字 色 を 指定 する ==。=。 






Internet Explorer 6.0 
当 文字 色 を 指定 す xplorer x * 記す る - Mezullo Frefpx LMZX 


正文 字 色 の 折 定 


画 文 字 色 の 指定 
定 


Sa ね / 
5-/mac 
克 4-ac 


on 要素 の color 必 性 は 、 指 定 し た 範囲 の テキ スト の 色 を 指定 し ます 。 
ペー ジ 全 体 を 通し て の 文字 色 や ヤリ ンク 部 分 に 関す る 色 は 、body 要素 の 属性 で 指定 する 

こと が で きま す 。 

た だ し 、HTML で 色 の 指定 を 行う こと は 非 推 奨 と され て お り 、 新 し い HTML の 標準 仕 

様 で は 指定 で き な く な っ て いま す 。 文字 色 を 指定 する 場合 に は 、 で きる だ け ス タイ ル 

シー ト を 利用 する よう に し て くだ さい 。 


EYE L_L_ 





<D> 

<Font co1or="#EE0099"> 較 立 字 色 の 指定 </Eont><br> 
<Eont co1or="#EE9900"> 較 立 字 色 の 指定 </Eont><br> 
<font co1or="#99EE00"> 較 六 字 色 の 指定 </Eont><br> 
<font co1or="#00ff99"> 較 立 字 色 の 指定 </Eont><br> 
<Eont co1or="#0099fF"> 較 立 字 色 の 指定 </Eont> 

< く /p> 











riefox 
Moz//a 









EICE/ 
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ここ は ゴシック 体 で 
ここ は 明 朝 体 で す 。 


Firefox 1.0 


フォ ント の 種類 を 指定 する - Mozilla Frefox 


ここ は 明 朝 体 で す 。 


font 要素 の face 属性 は 、 指 定 し た 範囲 の テキ スト を 表示 する フォ ント の 種類 を 指定 し 
まま 3 

フォ ント 名 は ひと つ で も 指定 で きま す が 、 カ ンマ で 区 切っ て 複数 指定 し て お く こ と も 
で きま す 。 そ の 場合 は 、 よ り 先 に 指定 され て いる フォ ント で 、 ユ ー ザ ー の 環境 で 表示 
可能 な も る の が 採用 され ます 。 フ ォ ン ト 名 が 間違っ て いる と 正しく 表示 され ませ ん の で 、 
注意 し て くだ さい (特に 全角 と 半角 の 違い な ど )。 

た だ し 、font 要素 を 使う こと は 非 推 状 と され て お り 、 新 し い HTML の 標準 仕様 で は 使 
用 で き な く な っ て いま す 。 フォン ト の 種類 を 指定 する 場合 に は 、 で きる だ け ス タイ ル 
シー ト を 利用 する よう に し て くだ さい 。 


SH 半 ーーー 


<D> 

<Eont face="MS P ゴ シッ ク , 中 ゴシック BBB,Osaka"> 
ここ は ゴシック 体 で 、</Eont> 

<Dbr> 

<Eont face="rMS P 明 朝 , リ ュ ウ ミン ライ トーKL , 細 明 朝 体 "> 
ここ は 明 朝 体 で す 。</Eont> 

く /p> 


ト > 





フォ ント サイ ズ を 指定 する 


Internet Explorer 6.0 9 つい るり 


F た ど 】 と と る 


アイ ル ( 編集 D 表示 め 
OGs の 回 人 @ 4 
フォ ント の 標準 サイ ズ は 、 3 この サイ ズ ) で す 。 
オト サイ 

フォ ント サイ ズ 2. 


フォ ント サイ ズ 3 
フォ ント サイ ズ 4 


フォ ント サイ ズ 5 8 1 
フォ ント サイ ズ 6 フォ ント サイ ズ 6 


フォ ント サイ ズ 7 ' フォ ント サイ ズ 7 


font 要素 の size 属性 は 、 指 定 し た 範 胃 の フォ ント サイ ズ を 指定 し ます 。 

サイ ズ と し て は 1- 7 の 数 字 を 指定 で きま す が 、 具 体 的 な 大 き さ が 決ま っ て いる わけ で 
は な いた め 、 実 際 に 表示 され る 大 き さ は プラ ウザ に よっ て 異な る 場合 が あり ます 。 
た だ し 、font 要素 は 非 推奨 と きれ て お り 、 新 し い HTML の 標準 仕様 で は 使う こと が で 
き な く な っ て いま す 。 フ ォ ン ト サ イ ズ を 指定 する 場合 に は 、 で きる だ け ス タイ ル シ ー 
ト を 利用 する よう に し て くだ さい 。 


EE 所 


<D> 

フォ ント の 標準 サイ ズ は 、3 (この サイ ズ ) で す 。<br> 
<Eont gize="1"> フ ォ ン ト サ イ ズ 1</Eont><br> 
<Eont gize="2"> フ ォ ン ト サ イ ズ 2</Eont><br> 
<Eont size="3"> フォ ント サイ ズ 3</Eont><br> 
<font size="4"> フォ ント サイ ズ 4</Eont><br> 
<font gize="5"> フォント サイ ズ 5</Eont><br> 
<font gitze="6"> フォン ト サ イ ズ 6</Eont><br> 
<Eont size="7"> フォ ント サイ ズ 7</Eont> 

く /Dp> 





万 re7ox 
/ み 2 


6.X 
A2.X 


OperaZ7 


Ope/a6 


還 導 当 癌 叶 
加 回 国 国 回 
に 3 に 】 に 】 1 に 】 


Sa ね // 
た 5-m 


リア FE 


た /ode 














ん ル LA トド サイ ズ を 宙 齋 前 に 玩 光 る 


和幸 の サ の ます 。 


だ 【 


ここ は be 青 拉 で 大 きく し て し \ ま す 。 





Firefox 1.0 




















ッ ト サ イズ を 相対 的 変え る - Mozilla Firefo: 


cas 編集 6) 表示 V) 移動 (⑬ EZxgzn MK ルフ 


標準 サイ ズ ワ ォ ント サイ ズ 3) 
フォ ント サイ ズ +1 


フォ ント サイ ズ +2 







フォ ン ト サ イズ +3 3 PNGER4N 
ッ オ 0 ト サ イ ズ +4 ここ g 要 索 て 大き くし て いま す 。 


フォ トリ サイズ 

フォ ント サイ ズ -1 

標準 サイ ズ ( フ ォ ン ト サ イ ズ 3) 
フォ ント サイ ズ +1 


フォ ント サイ ズ +2 
フォ ント サイ ズ +3 


フォ ント サイ ズ +4 


big 要素 は フォ ント サイ ズ を 大 きく 、small 要素 は フォ ント サイ ズ を 小さ くし て 表示 し 
ます 。 そ の 際 に 、 具 体 的 に どの 程度 サイ ズ を 変更 する の か は 決ま っ て いま せん 。 

font 要素 を 使用 する と 、 現 在 の サイ ズ に 対し て 何 邊 階 大 きく また は 小さ くす る か を 指 
定 す る こと が で きま す 。 size 属性 に 「+」 ま た は 「-」 を 付け た 数 字 で 指定 し て くだ さい 。 た 
だ し 、 フ ォ ン ト サ イ ズ は 全部 で 7 段階 し か あり ませ ん の で 、 土 し た 結果 が 1 一 7 の 範囲 
に な る よう に し て くだ さい 。 

た だ し 、font 要 素 は 非 推 状 と され て お り 、 新 し い HTML の 標準 仕様 で は 使う こと が で 
き な く な っ て いま す 。 フ ォ ン ト サ イ ズ を 変更 する 場合 に は 、 で きる だ け ス タイ ル シ ー 
ト を 利用 する よう に し て くだ さい 。 
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ak 


間 和 ーー 


<D> 

<sgma11> ここ は sma11 要素 で 小さ くし て いま す 。</ sma11><br> 
ここ は 標準 の サイ ズ で す 。<br> 

<big> ここ は pig 要素 で 大 きく し て いま す 。</big> 

く /p> 

で D> 

<Eont size="-2"> フ ォ ン ト サ イ ズ -2</Eont><br> 
<Eont size="-1 ツ > フォント サイ ズ -1</Eont><b エ > 
標準 サイ ズ ( フ ォ ン ト サ イ ズ 3 ) <br> 

<font size="+1"> フ ォ ン ト サ イ ズ +1</Eont><b エ > 
<Eont gize="+2"> フ ォ ン ト サ イ ズ +2</Eont><br> 
<font gize="+3"> フォ ント サイ ズ +3</Eont><b エ > 
<font size="+4"> フ ォ ン ト サ イ ズ +4</Eont> 
</p> 








/E6.0 
/E5.5 
/E5.0 
/E4.0 


太 refox 
Moz/a 
リル 


ミ き 
xx 


7 





Ope/ 
Opera6 
Sa な ね / 


圧 5-mar 
圧 4-m。 


た /ode 








Internet Explorer 6.0 
等 フォ ント の 基本 サイ 


@s・ の 回 四 の 3 
まお ちゃ ん と お と も だ ち 
まお ちゃ ん は 、 げ ん き な お ん な の こ で す 。 


ある あさ 、 お うち を で る と 、 お お き な い ぬ が 
ある いて きま し た 。 その いぬ は 、 し ろく て 、 





ち 


まお ちゃ ん は 、 げん き な お ん な の こ で す 。 ある あさ 、 お うち を で る と 、 
お お き な い ぬ が ある いて きま し た 。 その いぬ は 、 し ろく て 、 よ て も や さ 
し いか お を し て いま す 。 


【 お うち の か た へ 】 こ の 作品 は 、 … 


と て も や さ し い か お を し て いま す 。 


【 お うち の か た へ 】 こ の 作品 は 、… 





basefont 要素 は 、 こ の 指定 以降 の フォ ント の 基本 サイ ズ を 設定 し ます 。 

た だ し 、 見 出し の 大 き さ に は 影響 し ませ ん 。 サ イズ と し て は 1~ 7 の 数 字 を 指定 で きま 
す が 、 具 体 的 な 大 き さ が 決ま っ て いる わけ で は な いた め 、 実 際 に 表示 さき れる 大 き さ は 
プラ ウザ に よっ て 異な る 場合 が あり ます 。 

た だ し 、basefont 要素 は 非 推 状 と きれ て お り 、 新 し い HTML の 標準 仕様 で は 使う こと 
が で き な く な っ て いま す 。 フ ォ ン ト の サイ ズ に 関す る 指定 を する 場合 に は 、 で きる だ 
け ス タイ ル シ ー ト を 利用 する よう に し て くだ さい 。 


<baseFont size="5"> 
<h1> まお ちゃ ん と お と も だ ち </h1> 
<D> 
まお ちゃ ん は 、 げ ん き な お ん な の こ で す 。 あ る あさ 、 お うち を で る と 、 おおきな いぬ が ある いて きま 
し た 。 そ の い 水 は 、 し ろく て 、 と て も や さ し い か お を し て いま す 。 
く /p> 
) 
<baseFon size="2"> 
く DP> 
【 お うち の か た へ 】 こ の 作品 は 、 … 
< く /p> 








/E6.0 
リ 子 和 】 
/E5.0 
/F4.0 


他 の ペー ジ に リン ク す る 


//re7ox 
Mozja 
リリ リル 
W6.X 
4.X 


Internet Explorer 6.0 191d( い る 
詩 他 の ペー ジ に リン ク す る 


ホー ム | 更新 情報 | 会 社 節 要 | 製品 情報 | 採用 情報 


し 9 (ココ 
hdd Copyright @ 2001 - 2005 A-HREF,Inc. 
Copyright @2001 - 2005 A-HREFJnc 


ホー ム | 更新 情報 | 会 社 概要 | 製品 情報 | 振 用 情報 


Sa ね / 
リネ 
た 4-m 





a 要 素 の href 属性 は 、 指 定 し た 範囲 を ま 他 の ペー ジ に リン ク す る よう に し ます 。 /-77006 
リン ク さ せる 部 分 の 言葉 は 、 そ の 部 分 だ け を 見 て も リン ク 先 の 内 容 が 具体 的 に 連想 で 

きる よう な も の に し て くだ さい 。「 こ こ 」 や 「 こ こ を クリ ッ ク 」 と いう よう な リン ク の 仕 

方 は 避け た ほう が よい で し ょ う 。 ま た 、 画 像 を リン ク さ せる 場合 に は 、 リ ンク 先 が 明 

確 に わか る よう な 代替 テキ スト (alt="~ー") を 必ず 入れ る よう に し て くだ さい 。 


Er 舞 es 


< く D> 

<a href=mindexr.htm1m> ホー ム </a> | 

<a href="wEnew.htm1"> 更新 情報 </a> | 

<a href="about .htm1 "> 会社 概要 </a> | 

<a href="prdot .htm1 "> 製品 情報 </a> | 

<a href="recrt .htm1"> 採用 情報 </a> 

く /p> 

<D> 

<a href="1ndexr htm1 "> 

<1mg Sro="1con.g1fF" width="88" height="31" a1t="A-HREF ホー ム "> 
</a> 

<b エ > 

Copyright gcopy: 2001 - 2005 A-HREF, Tnc. 
く /p> 








@ の etNVY こ 











Sa お カ 
リエ 


リズ! 


/-/Ode 








Internet Explorer 6.0 


妥 同 し 7 
アイ ル ⑥ 編集 


O ま ・ の 回 四 る の wm 
アク セ シ ブ ル な ウェ ブ デ ザイ ン 










1. は じ め に 
【 目 次 | 次 の 項目 】 
Web ページ デザ イン に 関連 する アク セン シビ リティ に つい て よく 知 


ら な い 方 は 、 多く の ユー ザー が あな た と は 非常 に 異な っ た 状況 
の 元 で 近 作 し て いる 可能 性 が ある と いう こと を 考え て みて くだ さ 



















【 前 の 項目 | 目次 | 次 の 項目 】 


画像 や 映像 音 . アプ レッ ト な ど に 関し て は 直接 利用 する こと が 
で き な い 人 も いま す が 、 それ ら に 対し て 同等 の 意味 を 持つ 情報 
も 含ま れ て いれ ば . その ペー ジ を 利用 する こと が 可能 に な り ま 
す 。 こ の 場合 、 同等 の 意 史 を 持つ 情報 は 、 見 る た め の 内 容 や 
聞く < た ゆめ の 内 容 と 同じ 効果 を 持っ て いな けれ ば な り ま せん 。 し た 
が っ て 、 た と え は 目次 に リン クレ て いる 「 上 向き の 矢印 の 画像 」 
に 対す る 同等 の 意味 を 持つ テキ スト の 場合 は 、 「 目 次 へ 」 の よう 
に な り ま す 。 場合 に よっ て は 、 同等 の 意味 を 持つ 代わ り の も の 
は 、 見 る た め の 内 容 そ の まま の 姿 や 聞く < た め の 内 容 の 音 その 
も の を 表現 すべ き 時 も あり ます 。 ( 例 : 複 雑 な お 図 広告 図形 や 
教育 の た め に 利用 され る 音声 の サン ブル な ど ) 


3. 色 に 依存 し な い 


【 前 の 項目 | 目次 | 次 の 項目 】 


ある 情報 を 伝え る た の に 色 だ け を 利用 し て いる 場合 、 特定 の 色 
を 識別 で き な い 人 や モノ クロ の 画面 を 使用 し て いる 人 . ビジ ュ ア 
ル な 表示 の で き な い ディ スプ レイ を 使用 し て いる 人 な ど は 、 情報 
を 受け 取る こと が で き な く な り ま す 。 また 、 前 景色 と 背景 双 の 色 

相 が 非常 に 近い よう な 場合 モノ クロ モー タ で 見 て いる 人 や 色 
の 織 別 が 埋 .A い 人 な ど に 対し て _ 十 分 な コノ トラ スト を 与え る ご 



















TO いる PU 


同じ ベー ラ の 特 








ト ME に 4 9 GL 
アク セ シ ブ ル な ウェ ブ デ ザイ ン 
目次 


*1. は じ め に 


* 2. スト の 
・ 3. 色 に 依存 し な い 
・. 適切 に スタ イル シー ト を 使う 
5. 点滅 や 移動 は 止め られ る よう に する 
。 に 依存 し な いよ うに 設計 する 
・ 1 青 定 的 な 解決 策 を と る 
8. 前 後 聞 係 や 位置 を 表す 情報 の 提供 
9. ナビ ゲー ショ ン の た め の 仕 組 の 提供 


・ 
・ 





1. は じ め に 


【 目 次 | 次 の 項目 】 


Web ペ ー ジ デザ イン に 聞 連 する アク セ シ ビ リティ に つい て よく 知ら 
な い 方 は 、 多く の ユー ザー が あな た と は 非常 に 据 な っ た 状況 の 
元 で 操作 し て いる 可能 性 が ある と いう こと を 考え て みて 


飲 


2. 代替 テキ スト の 提供 


【 前 の 項目 | 目次 | 次 の 項目 】 


画像 や 映像 、 音 、 アプ レッ ト な ど に 聞 し て は 直接 利用 する こと が 
で き な い 人 も いま す が . それ ら に 対し て 同等 の 意味 を 持つ 情報 も 
含ま れ て いれ ば 、 その ペー ジ を 利用 する こと が 可能 に な り ます 。 
この 場合 、 同等 の 意味 を 持つ 情報 は 、 見 る た め の 内 容 や 聞く た 
め の 内 容 と 同じ 効果 を 持 ぐい な けれ ば な り ま せん 。 し た が っ 
て 、 た と えば 目次 に リン クレ し て いる 「 上 向き の 矢印 の 画像 」 に 対す 
る 同等 の 意味 を 持つ テキ スト の 場合 は 、 「 目 次 へ 」 の よう に な り ま 
す 。 場合 に よっ て は 、 同等 の 意味 を 持つ 代わ り の も の は 、 見 る た 
め の 内 容 その まま の 姿 や 聞く た め の 内 容 の 音 その も の を 表現 す 
べき 時 も あり ます 。 ( 例 : 複 条 な 図 、 広告 、 図形 や 教育 の た め に 利 
用 され る 音声 の サン プル な ど ) 


3. 色 に 依存 し な い 


【 前 の 項目 | 目次 | 次 の 項目 】 


ある 情報 を 伝え る た め に 色 だ け を 利用 し て いる 場合 、 特定 の 色 

を 識別 で き な い 人 や モノ クロ の 画面 を 使用 し て いる 人 、 ビジ ュ ア 

ル な 表示 の で き な い ディ スプ レイ を 使用 し て いる 人 な ど は 、 情報 

を 受け 取る こと が で き な く な り ます 。 また 、 前 景色 と 背景 色 の 色相 
が 非常 に 近い よう な 場合 、 モノ クロ モニ タ で 見 て いる 人 や 色 の 識 還 


ひと つの ペー ジ が と て も 長い 場合 な ど に 、 同 じ ペ ー ジ 内 の 特定 の 位置 に 名 前 を 付け て 間 5 基 
お いて 、 そ こ に リン ク ( ジ ャ ンプ ) す る こと が で きま す 。 リ ンク の 対象 と な る 位置 に 名 因 \ 届 
前 を 付け る に は 、 name 属性 を 使用 し ます 。 そ し て 、 そ こ ヘ リン ク す る た め に は 、href 罰 # 誠 / 
属性 で リン ク 先 の 名 前 の 前 に 「#] 記 号 を 付け て 指定 し ます 。 /E4.0 

7e7ox 
| Samplc 還 還 間 間 間 の 7 た 】 


<h1> アク セ シ ブ ル な ウェ ブ デ ザイ ン </h1> 








<h2><a name="contentg"> 目 次 </a></h2> 7 あ 4 
<u1> MX 
<11> <a href="#3ntro">1. は じ め に </a></1i> 
<1i><a href="#equiv">2. 代替 テキ スト の 提供 </a></11> 0peraZ 
<1i><a hreE=" 韻 co1or">3. 色 に 依存 し な い </a></11> Ope/a6 
) Sa ね // 
< く /u1> - 
3 圧 5-ma 
/E4-ma 
<h2><a name="intro">1. は じ め に </a></h2> cns 


【<a hreE="#contents"> 目 次 </a> 
| <a href="#equiv"> 次 の 項目 </a>】 
く /p> 
<p>Web ペー ジ デ ザイ ン に 関連 する アク セ シ ビ ピリ ティ …</p> 


<h2><a name="equiv">2. 代替 テキ スト の 提供 </a></h2> 
<D> 
【<a href="#intro"> 前 の 項目 </a> 
| <a href="#contentg"> 目次 </a> 
| <a href="#co1or"> 次 の 項目 </a>】 
</p> 
<p> 画像 や 映像 、 音 、 ア プレ ッ ト な ど に 関し て は …</p> 
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他 の ペー ジ の 特定 の 位置 に リン ク す る 


1913( ひ る 


ホー ムペ ー ジ を 作ろ う ホー ムペ ー ジ を 作ろ う 


第 3 回 画像 の 話 第 3 回 画像 の 話 
さて 、 今回 は ホー ムペ ー ジ で 使う 画像 に つい て 老 え て の た い 。 さて. 今回 は ホー ムペ ー ジ で 使う 画像 に つい て 考え て みた い . 結 放 


結 議 か ら 言 っ て し まう と 下層 と 同じ くら い 「 人 人 5 スト 」( は 和 ら 言 っ て し まう と . じ く らい 「 代 替 テ キス ト 」( 
時 2 の で あ る. な ぜ な ら 、 それ が 画像 の だ か 2 で が 人 の 人 も L2S25S た 。 


他 の ペー ジ に リン ク す る 場合 に 、 そ の ペー ジ 内 の 特定 の 位置 に 名 前 を 付け て お いて 
その 位置 に リン ク ( ジ ャ ンプ ) さ せる こと が で きま す 。 リ ンク の 対象 と な る 位置 に 名 前 
を 付け る に は 、 name 属性 を 使用 し ます 。 そ し て 、 そ の 位置 ヘリ ンク す る た め に は 、 href 
属性 に 「URL +#+ 位置 名 ] を 指定 し ます 。 


| Samplc 王 呈 


<h1> ホー ムペ ー ジ を 作ろ う </h1> 
<h2> 第 3 回 画像 の 話 </h2> 
<p> 
さて 、 今回 は ホー ムペ ー ジ で 使う 画像 に つい て 考え て みた い 。 

結論 か ら 言 っ て し まう と 、 画像 と 同じ くら い 「<a hreE="../ ] 














accesg1bi11ty/1ndex.htm1#equiv"> 代替 テキ スト </a>」 は 重要 
な の で ある 。 な ぜ な ら 、 ぞ それ が 画像 の 代わ り と な る も の だ か ら だ 。 

0 
</p> 


※ リ ンク 先 の ソー ス に つい て は 、「 同 じ ペ ー ジ の 特定 の 位置 に リン ク す る 」(P.S6) を 参 
照 し て くだ さい 。 





リン ク 部 分 の 文字 色 を 設定 する 


H 








ホー ム | 更新 1 | 会 社 概要 | 製品 情報 | 採用 情報 


Gopyright @2001 - 2005 LinkColorlnc 


ホー ム | 更新 情報 | 会社 概要 | 製品 情報 | 採用 情報 


Copyright @ 2001 - 2005 LinkColor,Inc. 


body 要素 で 、 ペ ー ジ 全体 を 通し て の リン ク 部 分 の 文字 色 を 設定 し ます 。 
まだ 見 て いな い ( キ ャ ッシュ され て いな い ) リ ンク 、 す で に 見 た (キャ ッシュ され て いる ) 
リン ク 、 リ ンク の 上 で マウ ス ボ タ ン を 押し た 時 の 3 種類 の 状態 の 色 を 指定 する こと が 
で きま す 。 こ れ ら の 色 を 設定 する 場合 に は 、 同 時 に ペー ジ 全 体 を 通し て の 文字 色 と 背 
景色 も 設定 し て お く よ う に し て くだ さい 。 そ うし な いと 、 ユ ー ザ ー が ブラ ウザ の 設定 
で 背景 色 を 変更 し て いる 場合 な ど に 、 文 字 色 と 背景 色 が 同じ 系 統 の 色 に な っ て し まい 、 
文字 が 読め な く な っ て し まう 可能 性 が あり ます 。 

な お 、HTML で 色 を 設定 する 方 法 は 、 さ ま ざ ま な 理由 か ら 非 推 差 と され て お り 、 新 し 
い HTML の 標準 仕様 で は 使う こと が で き な く な っ て いま す 。 色 を 設定 する 場合 に は 、 
で きる だ け ス タイ ル シ ー ト を 利用 する よう に し て くだ さい 。 
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<body text="#000000" bgco1or="#EFFFFF" 

1ink="#339900" で 11ink=" 韻 666666" a1ink="#EE9900"> 。) 
0 

<d1y 1d="Footer"> 

<D> 

<a href="index.htm1 "> ホー ム </a> | 

<a href="wEnew .htm1 "> 更新 情報 </a> | 

<a href="about .htm1 "> 会 社 概要 </a> | 

<a href="prdct .htm1 "> 製品 情報 </a> | 

<a href="reort .htm1 "> 採用 情報 </a> 

< く /p> 

<p>Copyright gcopy: 2001 - 2005 LinkCo1or, Tnc .</p> 

< く /d1V> 


</body> 











リン ク 先 を 別 の ウィ ンド ウ に 表示 する 


Internet Explorer 6.0 
当 リ ンク 先 を 別 の ウィ ンド ウ に 表示 する - Microsol 
カイル 編集 (D 表示 お 気 に AD 


OR・O 回 回 の の mw 支 pmoo 





target 属性 を 利用 する と 、 リ ンク 先 を 表示 させ る ウィ ンド ウ を 指定 する こと が で きま す 。 
指定 し た 名 前 の ウィ ンド ウ が すでに ある 場合 は その ウィ ンド ウ へ 、 な い 場 合 は 新しい 
ウィ ンド ウ を 開い て 表示 し ます 。 新しく 開い た ウィ ンド ウ の 名 前 は 、target 属性 で 指定 
し た も の に な り ま す 。 ま た 、「_blankl の よう に 「_」 で 始ま る 特別 な 名 前 も 用 意 さ れ て い 
ます 。 名 前 と し て 「_blank」 を 指定 する と 名 前 の な い 状 態 で 新しい ウィ ンド ウ を 開い て 
表示 し 、「_self] を 指定 する と リン ク 元 と 同じ ウィ ンド ウ に 表示 し ます 。 

た だ し 、 ユ ー ザ ー の 環境 に よっ て は ( 全 画 面 で 見 て いる 場合 や 、 音 声 プ ラウ ザ な ど を 利 
用 し て いる 場合 )、 新しい ウィ ンド ウ が 開い た こと が わか ら ず に 混乱 する 場合 も あり ま 
すし 、 リ ンク 先 を 同じ ウィ ンド ウ に 表示 させ た いと 思う ユー ザー も いま す 。 そ の よう 
な 意味 で 、 リ ンク 先 を 別 の ウィ ンド ウ に 表示 させ る こと は 、 通 常 は 避け た ほう が よい 
で レ ま 9'6 
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<h1> オン ライ ン 絵 本 . リ ンク 集 </h1> 

<h2> 

<a href="h 上 て p: / /www phoenixx-C.or.Jp/-zspc/bekoinu/『 
target="ehon"> べ こ いぬ </a> 4 
</h2> 

<D> 

が わい い 小 犬 の 「 べ こい ぬ 」 が 、 知 ら な いう ち に 生態 系 を 

壊し て し まう と いう 、 ち ょ っ と 変わ っ た お 話 で す 。 ao | 

展開 を お 楽し みく だ さい 。 

く /p> 


target 属 性 の 特別 な 4 つの 値 

リン ク 先 を 表示 する フレ ー ム や ウィ ンド ウ を target 属 性 で 指定 する 場合 、 あ ら か 
じ め 決め られ て いる 4 種類 の 特別 な 名 前 が あり ます 。 そ れ ぞ れ の 名 前 と 機能 は 、 次 
の 通り で す 。 


_top フレ ー ム を 解除 し て 、 リ ンク 先 を ウィ ンド ウ 全 体 に 表示 

_parent リン ク 先 を リン ク 元 の フレ ー ム の 親 フ レー ム に 表示 。 親 フ レー ム が 
な い 場 合 に は 、「_self」 と 同様 の 結果 に な る 

_self リン ク 先 を リン ク 元 と 同じ フレ ー ム に 表示 

_blank 新しい ウイ ンド ウ を 開い て 、 リ ンク 先 を その ウィ ンド ウ に 表示 。 そ 
の ウィ ンド ウ は 、 名 前 の な い 状 態 に な る 
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リンク で メー ル ソ フ ト を 起動 する 


EE 加 加 回 回 
SE 回 
還 に に 】 に 】 1 【ー】 


さ 
し 。 イ 


ヒコ 
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ミ 
>< 


ご 意見 ・ ご 感想 を お 待ち し て いま す 。 


の 外 束 - gro@s/uywasysferrr co。 Ope/g7 


Ope/ya6 


Sa ね / 


話 5-ma 
リア 


惑 メッ セー ジ の 作成 





量 き 同人 に の 


|ShokarDc <shokaidiceshuwasyste 
・ loWshomsystemcojp 


//mod 


opere の 生 新 的 メー ルク ライ アン ト 。 mz を 使用 し て いま す : nccpi// 
www.opera.com/m2/| 





リン ク 部 分 を クリ ッ ク す る こと で 、 自 動 的 に メー ル ソ フ ト が 起動 する よう に し ます 。 

リン ク の URL を 記入 する 部 分 に 、「mailto:] に 続け て メー ル ア ド レス を 記入 し て くだ さ 
。 一般 的 な 環境 で は 、 指 定 し た メー ル ア ド レス が 入力 され た 状態 で 、 メ ー ル ソフ ト 

が 起動 し ます 。 

た だ し 、 こ の 機能 は 必ず し も すべ て の プラ ウザ で 利用 で きる わけ で は あり ませ ん 。 メ ー 

ル ア ド レス は 、 必 ず 画 面 に 表示 され る よう に (リン ク 部 分 の 文字 に メー ル ア ド レス を 含 

め る よう に ) し て お いて くだ さい 。 


く D> 
ご 意見 ・ ご 感想 を お 待ち し て いま す 。 

く /p> 

<address> 

山田 太郎: 

<a hreE="mai1to: 上 aroOGshuwasyStem.CO.]p"> 
taroGshuwasysterm .CO . ]D</a> 

</addresS> 
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の 圭 計 テニ | 





スト を 作る 


1Gi(d り (0 て AU 


に ルミ リル 44 34 


・ リ スト 項目 1 1 *・ リ スト 項目 1 
・ リ スト 項目 2 ・ リ スト 項目 2 
・ リ スト 項目 3 ・ リ スト 項目 3 








・ リ スト 項目 1 
・ リ スト 項目 2 
・ リ スト 項目 3 


・ リ スト 項目 1 
・ リ スト 項目 2 
・ リ スト 項目 3 


ul 要素 は 、 丸 や 四角 な どの マー ク の 付い た リス ト (箇条 書き ) 形 式 で 表示 し ます 。 リ ス 
ト 全 体 を <ul> <ul> で 囲み 、 そ の 中 で 各 項 目 を <li> </i> で 囲っ て 示し ます 。 1 要 
素 の 内 容 と し て は 、 イ ン ラ イン 要素 だ け で な く プ ロッ クレ ベル 要素 (リス ト も 含む ) も 
入れ る こと が で きま す 。 

一 般 的 な プラ ウザ で は 、 全 体 に イン デン ト さ れ た 状態 で 、 各 項目 は 自動 的 に 改行 され 
て 表示 され ます 。 ま た 、 マ ー ク と し て は 黒丸 が 一 般 的 で す が 、 す べ て の プラ ウザ で そ 
の よう に 表示 され る と は 限り ませ ん 。 


<u1 ユ > 

<1i> リス ト 項 目 1</13> 

<1i> リス ト 項 目 2</1> 

<1i> リス ト 項 目 3</ ユ ミ > 

</u1> 

<hr> 

< く u1> 

<11><p> リス ト 項 目 1</p></1> 
<1><p> リス ト 項 目 2</p></11> 
<1><p> リス ト 項 目 3</p></ ユ > 
</u1> 








Internet Explorer 6.0 
当 リ スト の マー ク を 








・ リ スト 項目 1 
o リス ト 項 目 2 
ェ リ スト 項目 3 


















・ リ スト 項目 1 
c リス ト 項 目 2 
ョ リス ト 項 目 3 


ul 要素 内 の type 属性 は 、 マ ー ク 付き リス ト の 各 項 目 の 前 に 表示 され る マー ク の 種類 を 
設定 し ます 。 

<ul> に 指定 する と リス ト 全 体 が その マー ク に 変更 され 、<li> に 指定 する と その 項目 だ 
けが 変更 され ます 。 た だ し 、 こ れ ら の マー ク は プラ ウザ の 種類 に よっ て 、 そ の 大 きき さ 
や 人 色 (square に は 白 抜 き の も の と 塗り つぶ し の も の が あり ます ) な ど が 異な り ま す 。 
また 、 こ の 属性 を 使う こと は 非 推 装 と きれ て お り 、 新 し い HTML の 標準 仕様 で は 使う 
こと が で き な く な っ て いま す 。 マ ー ク の 種類 を 設定 する 場合 に は 、 で きる だ け ス タイ 
ル シ ー ト を 利用 する よう に し て くだ さい 。 


ED0 呈 ーーーーーーーー 


<Uu1> 

<11 type="digc"> リ スト 項目 1</1> 
<11 type="oirc1e"> リ スト 項目 2</13> 
<11 type="square"> リス ト 項 目 3</11> 
</u1> 
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リス ト 項 目 A 
リス ト 項 目 B - リス ト 項 目 B 
リフ スト 項目 C ・ リス ト 頂 目 








・ リ スト 項目 
・ リス ト 頂 目 B 
、 リス ト 項 目 C 


リス ト 項 目 A 
リス ト 項 目 B 
リス ト 項 目 で 





ol 要素 は 、 マ ー ク で は な く 、 番 号 の 付け られ た リス ト 形 式 で 表示 し ます 。 リ スト 全体 
を <ol> ~ </ol> で 囲み 、 そ の 中 で 各 項 目 を <li> </li> で 囲っ て 示し ます 。 1i 要 素 の 内 
容 と し て は 、 イ ン ラ イン 要素 だ け で な く プ ロッ クレ ベル 要素 (リス ト も 含む ) も 入れ る 
こと が ぐ で きま す 。 
一 般 的 な プラ ウザ で は 、 全 体 に イン デン ト さ れ た 状態 で 、 各 項目 は 自動 的 に 改行 され 
て 表示 され ます 。 


Ll 


ーー <o1> 

ーー 二 <1i> リ スト 項目 A</13> 

リ <1i> リス ト 項 目 B</1> 

ス <1i> リス ト 項 目 C</11> 

ト </o1> 

を <h エ > 

る <o1> 

<1i><p> リス ト 項 目 A</p></11> 
<1i><p> リス ト 項 目 B</p></13> 
<1i><p> リス ト 項 目 C</p></13> 
</o1> 
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番号 の 形式 を 変え る 

<ol type=" 番号 の 形式 "> </ol> 及 了 ル 

<Hi type=" 番号 の 形 ">ー</ せ > 

/ の 4 た | 

1 ( 算 用 数 字 ) 1., 3. … 

a ( 英 小 文字 ) DO 

A ( 英 大 文字 ) AB Opera7 

1( ロ ー マ 数 字 小文字 ) iii 他 … 
1( ロ ー マ 数 字 大 文字 ) に 旧 … 
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Internet Explorer 6.0 


i リス ト 項 目 A 1. リス ド 頂 目 A 


i リスト 項目 B 


1 リス ト 頂 目 B 


党 リス ト 項 目 C 需 . リス ト 項 目 C 





ol 要素 内 の type 属性 は 、 番 号 付 き リ スト の 各 項 目 の 前 に 表示 され る 番号 の 形式 を 設定 
し ます 。<ol> に 指定 する と リス ト 全 体 が その 形式 に 変更 され 、<li> に 指定 する と その 
項目 だ けが 変更 され ます 。 

た だ し 、 こ の 属性 を 使う こと は 非 推 装 と され て お り 、 新 し い HTML の 標準 仕様 で は 使 
うこ と が で き な く な っ て いま す 。 番 号 の 形式 を 設定 する 場合 に は 、 で きる だ け ス タイ 
ル シ ー ト を 利用 する よう に し て くだ さい 。 


EETTTE 人 Ll____ 


<o1 type="i リ > 

<11i> リス ト 項 目 A</11> 
<11> リス ト 項 目 B</11> 
<11i> リス ト 項 目 C</11> 
</o1> 


の 寺 了 デジ こ 作 


② スタ イル シー ト : 「 リ スト 」 の 「 リ スト の マー ク や 番号 の 形式 を 変え る 」 (P.270) 
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リス ト 項 目 A 
5 リス ト 項 目 B 
6. リス ト 項 目 C 
1 リスト 項目 D 
2 リス ト 項 目 E 
3。 リ スト 項目 F 








Firefox 1.0 


番号 の 期 庁 を 才 更 する - Mozilla Firefox 


ol 要素 に start 属 性 を 指定 する と 、 番 号 付 き リ スト を 指定 し た 番号 か ら 開 始 さ せる こと 
が で きま す 。 ii 要素 に value 属性 を 指定 する と 、 そ の 項目 の 番号 が 変更 され 、 以 降 の 項 
目 も それ に 続く 番号 に 変更 され ます 。 

た だ し 、 こ の 属性 を 使う こと は 非 推 状 と され て お り 、 新 し い HTML の 標準 仕様 で は 使 
うこ と が で き な く な っ て いま す の で 、 注 意 し て くだ さい 。 


ET 


< く O1 start="4"> 

<1i> リス ト 項 目 A</1i> 

<11> リス ト 項 目 B</11> 

<1i> リス ト 項 目 C</11> 

<11 value="1"> リ スト 項目 D</11> 
<1i> リス ト 項 目 E</11> 

<11> リス ト 項 目 F</11> 

</o1> 





語 と 説明 の リス ト を 作る 。 





Internet Explorer 6.0 


用 語 と 説明 の リス 





2 ド 
ウェ ブ ・ コ ン テ ン ツ に アク セス する た め の ソ フト ウェ ア 。 一 
般 89 な デス クト ッ プ の グラ フィ カル な ブラ ウザ の 他 、 音声 
ブラ ウザ 、 携帯 電話 、 マル チ メ デ ィ ア ブ プレイヤー、 ブラ グイ 
ン な ども 含ま れる 。 












9 いる 


は の しり [リル 93 コル キ 】 


Mozilla Firefox 





ユー ザー エー ジェ ント 

ウェ ブ ・ コ ン テ ン ツ に アク セス する た め の ソ フト ウェ ア 。 一 般 的 

な デス クト ッ プ の グラ フィ カル な ブラ ウザ の 他 、 音声 ブラ ウザ 、 

0 マル チ メ デ ィ ア プレ イヤ ー、 プラ グイ ン な ども 含ま 
る 。 


用 語 と それ に 対す る 説明 (定義 ) を 対 に し た 形式 で 表示 し ます 。<dl> ~ </dl> の 範囲 に 
は 、dt 要 素 ( 用 語 ) と dd 要素 (説明 ) を 1 組 だ け で な く 、 そ れ ぞ れ 必 要 な 数 だ け 任 意 の 順 
序 で 入れ る こと が で きま す 。 

一 般 的 な プラ ウザ で は 、<dd> ~ </dd> の 範囲 が イン デン ト さ れ て 表示 きれ ます 。 


|Samplp 王 還 時 


<d1> 

<dt> ユー ザー エー ジェ ント </qt> 

<dd> 

ウェ ブ ・ コ ン テ ン ツ に アク セス する た め の ソ フト ウェ ア 。 
一 般 的 な デス クト ッ プ の グラ フィ カル な ブラ ウザ の 他 、 
音声 プラ ウザ 、 携 帯電 話 、 マ ル チ メ ディ アブ レイ ヤー、 
プラ グイ ン な ども 含ま れる 。 

</dd> 

</d1> 
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2.0 <table border=" 外 の 太 さ ">ー</table> を へ e 表 全体 
万 e7ox <tr> 一 </tr> を 横 1 列 
oz <th> 一 </th> 欠 セ ル : 見 出し 用 
<td> 一 </td> や セル: デー タ 用 


外 枠 の 太 さ ピク セル 
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Opera/ HTML の 表 の 構造 
Opeya6 
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表 全 体 横 1 列 


左 4-mac 














IOMi(29 の 1 り 【UvdWWl 3 いる 


当 表 の 基本 形 - Microsoft jnte plorer に 表 の 基本 形 - Mozilla Frefox 


アイ ル () 枝 集 (D 表示 お 気に入り @ 


@・ の 回 回 人 の の 


見 出し 1 見 出し 2 見 出し 3 見 出し 1 見 出し 2 見 出し 3 
デー タ 1 デー タ z デー 2 
デー タ 4 デー タ 5 デー36 デー タ 4 デー タ 5 デー タ 6 





見 出し 1 見 出し 2 見 出し a | | 員 出 し 1 県 出し 2 | 見出し 3 
デー タ 1 デー タ z デー | 尻 -*1 ピー ぁ 2 | データ s 
テー タ 4 デー タ s デー26 | | デー タ 4 | デー タ 5 | デー タ 6 




















ul| 


表 は 、 そ の 全体 を <table> </able> で 囲っ て 示し ます 。 表 の 中 の ひと つの セル は <th> 
ー<h>、 ま た は <td> 一 <td> で 表 さ れ 、 各 セル は 表 の 横 1 列 分 ずつ <t> ~ </r> で 半 っ 
て まとめ ます 。 つ まり 、table 要素 の 内 容 は 横 1 列 を 表す rr 要素 で 構成 され 、 各 rr 要素 
の 内 容 は セル を 表す 要素 、 ま た は td 要素 で 構成 され る と いう こと に な り ま す 。 th 
要素 は 、 そ の セル が 見 出し の 役割 を する セル で ある こと を 表し 、td 要 素 は その セル 
の 内 容 が デー タ で ある こと を 示し ます 。 一 般 的 な プラ ウザ で は 、t 要 素 内 の 文字 は 
太字 で セン タリ ング され て 表示 され ます 。 ま た 、 一 般 に border 属 性 を 指定 し な けれ 
ば 、 表 の 枠 は 表示 され ませ ん 。 





<tab1e> 
< セキ エ > 
<th> 見 出し 1</th> <th> 見 出し 2</th><th> 見 出し 3</th> 
< く / 上 エッ > 
< く キ ヒエ > 
<td> デー タ 1</td> <td> デー タ 2</td><td> デー タ 3</td> 
< く /t 上 エッ > 
< セテ > 
<td> デー タ 4</td> <td> デー タ 5</td> <td> デー タ 6</td> 
< く / 上 エ > 
</tab1e> 


<tab1e border="2"> 
< セ テッ > 
<th> 見 出し 1</th> <th> 見 出し 2</th><thz> 見 出し 3</th> 
< く / 上 エ > 
< セテ > 
<td> デー タ 1 </td> <td> デー タ 2</td> <td> デー タ 3</d> 
< く /t 上 エ > 
< セテ > 
<td> デー タ 4</td> <td> デー タ 5</td> <td> デー タ 6</td> 
< く / 上 テッ > 
</tab1e> 


音声 ブラ ウザ で は 表 を どの よう に 読み 上 げ る の か が? 

HTML の テー ブル は 表 を 表す た め の も の で す が 、 実際 に は レイ アウ ト を する 目的 
で 使用 され て いる こと も あり ます 。 こ れ は 現実 的 に は 仕方 が が いこ と か も し れ ま せ 
ん が 、 レ イア ウト の 仕方 に よっ て は 、 音 声 ブ ラウ ザ な ど で 内 容 が わか ら な く な っ て 
し まう こと が あり ます の で 、 注 意 し て くだ さい 。 


多く の 音声 ブラ ウザ は 、 内 容 を 表 の 構造 に 従っ て 、 上 か ら 横 1 列 ず つ 読 み 上 げ て い 
きま す 。 簡 単に 言え ば 、 表 の 内 容 は ソー ス に 書か れ て いる 順序 で 読み 上 げ ら れる と 
いう こと で す 。 テ ー ブ ル で レイ アウ ト を する 場合 に は 、 こ の 点 に 注意 し て 、 そ の よ 
うな 順序 で 内 容 が 読み 上 げ ら れ て も 、 内 容 が 理解 で きる よう に し て お いて くだ さい 。 
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Internet Explorer 6.0 


ル を 付け る - Mi 


参加 者 リス ト 
名 前 年 齢 性 別 
北海 太郎 B2 胃 
北海 道子 55 女 
、 名 前 年 齢 性 別 
北海 太郎 82 男 
北海 道子 5 女 





caption 要素 は 、 表 に タイ トル (キャ プシ ョ ン ) を 付け ます 。 

この 要素 は 、 必 ず table 要素 の 開始 タグ <table> の 直後 に 配置 し て くだ さい 。 表示 位 軒 
と し て は 表 の 上 (top) 、 ま た は 下 (bottom) が 指定 で きま す が 、 指 定 し な い 場 合 に は 上 
に 表示 され ます 。 

た だ し 、align 属性 を 使用 する こと は 非 推奨 と され て お り 、 新 し い HTML の 標準 仕様 
で は 使う こと が で き な く な っ て いま す 。 表示 方法 を 指定 する 場合 に は 、 で きる だ け 
スタ イル シー ト を 利用 する よう に し て くだ さい 。 


<tab1e border="2"> 

<caption> 参加 者 リス ト </caption> 

<tr><th> 名 前 </ th><th> 年 齢 </th><h> 性 別 </ th></t ェ > 

< 上 ェ ><d> 北海 太郎 </td><td>32</td><td> 男 </ td></t エ > 
<tr><d> 北海 道子 </td><td>25</td><d> 女 </ td></ 上 エ > 
</tab1e> 


<tab1e border="2"> 

<caption a1ign="jbottomy> 参加 者 リス ト </caption> 

<t エ ><th> 名 前 </th><th> 年 齢 </th><hz> 性 別 </th></t エ > 

< 上 ><d> 北海 太郎 </Ld><td>32</td><Ed> 男 </td></ 上 エエ > 
<tr><d> 北海 道子 </td><td>25</t 上 d><d> 女 </td></ 上 エッ 
</tab1e> 





表 の 大 き さ を 指定 する 
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table 要素 の width 属性 は 、 表 全体 の 幅 を ピク セル 数 また は % で 指定 し ます 。 

一 般 的 な プラ ウザ の 中 に は 、 高 さ を 指定 する た め の height 属 性 を サポ ー ト し て いる 
も の が あり ます が 、 標 準 的 な HTML の 仕様 で は table 要素 に height 属性 は あり ませ ん 。 
セル を 表す 要素 と td 要素 に は height 属 性 が あり ます の で 、 高 さ を 指定 し た い 場 合 
は そちら を 利用 する こと も で きま す 。 


EE 所 0 


<tab1e border="2" width="100%"> 

<tr><th> 名 前 </th><thz> 年 齢 </th><th> 性 別 </ th></t 上 > 
<tr><td> 北海 太郎 </td><td>32</td><d> 男 </ 上 d>< / 上 エ > 
<tr><Ed> 北 海 道子 </td><td>25</td><d> 女 </ 上 d></ 上 ェ > 
</tab1e> 











セル の 大 き さ を 指定 する 

















width 属性 は セル の 幅 を 、height 属性 は セル の 高き を ピク セル 単位 で 設定 し ます 。 

た だ し 、 こ れ ら の 属性 を 使用 する こと は 非 推 差 と きれ て お り 、 新 し い HTML の 標準 
仕様 で は 使う こと が で き な く な っ て いま す 。 セ ル の 大 き さ を 指定 する 場合 に は 、 で 
きる だ け ス タイ ル シ ー ト を 利用 する よう に し て くだ さい 。 


<tab1e border="2"> 

< ヒエ > 
<th width="100" height="100"> 名 前 </th> 
<th> 年 齢 </th> 
<thz> 性 別 </th> 

< く / 上 エ > 

< ヒエ > 
<td> 北 海 太郎 </td> 
< 上 d>32</ 上 d> 
<td> 男 </td> 

く / 上 エエ > 


ぶ 寺 層 問 川 


< ヒエ > 
<Ed> 北海 道子 </td> 
<td>25</ モ d> 
<td> 女 </td> 
7 代 記 > 
</tab1e> 


スタ イル シー トド : [ポッ クス ! の [ 編 と 高き を 押す る IP249) 
74 テー ブル 
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rowspan 属性 や colspan 属性 を 利用 する と 、 あ る セル か ら 指 定 し た 個数 分 の セル を ひ 
と つの セル と し て まとめ る こと が で きま す 。 

この 時 、 こ の 属性 が 指定 され た セル (th 要素 また は td 要素 ) は 、 ひ と つの セル で 指定 
され た 個数 分 の セル の 領域 を と る こと に な り ま す 。 し た が っ て 、 本 来 そ の 領域 内 に 
ある は ず の 連結 され た 側 の セル は 、 ソ ー ス か ら 取 り 去 る 必要 が あり ます 。 下 の サン 
プル で は 、 連 結 き れ て いな い 場 合 に 員 要 素 、 ま た は td 要素 が ある べき 位置 に 、 コ メ 
ント を 配置 し て 示し て いま す 。 


<tab1e border="2"> 
<tr> 
<th co1span="2"> 会 員 </th> 
<!-- ここ の th 要素 が 「 会 員 」 と 連結 され て いる --> 
<th> 地域 </th> 
< く / 上 エッ > 


sma 用 





/E6.0 2 
/E5.5 <Ed> 北海 太郎 </td> 


/E5.0 <Ed> 男 </td> 


<td rowspan="3"> 札幌 </td> 


く / 上 エエ > 
efox < キ 上 エ > 
Moz/a <td> 北 海 道子 </td> 
AZX <td> 女 </ 上 d> 
<!-- ご ここ の td 要素 が [札幌 」 と 連結 され て いる --> 
く / 上 > 





< キ ヒエ > 
Ope/a/ <td> 山 花子 </td> 
Opeya6 <d> 女 </ 上 d> 
<!-- ここ の td 要素 が [札幌 」 と 連結 され て いる --> 
< く / 上 エ > 


た 5-mac </tab1e> 
在 和 mac 




















Sa ね / 





ぶ 寺 誠 人 


セル の 連結 に 関す る HTML4.0 と HTML4.01 の 違い 

HTML4.0 と HTML4.01 で は 、rowspan 属性 また は colspan 属性 の 値 に 「0」 
を 指定 し た 場合 の 表示 方 法 に 関す る 仕様 が 異な っ て いま す 。 HTML4.0 で は 値 と し 
て 「0」 が 指定 され る と 、 そ の セル 以降 の すべ て の セル が 連結 され る 仕様 に な っ て い 
ます が 、HTML4.01 で は 連結 され る 範囲 が セル の グル ー プ (thead・tbody・tfoot・ 


colgroup) 内 に 限定 され て いま す 。 現状 で は 、 値 と し て 「0」 を 指定 し て も 認識 し な 
い ブ ラウ ザ が 多い た め 、 値 と し て 「0」 で は な く 、 実際 に 連結 する 個数 を 指定 し た ほ 
う が 安 全 で す 。 





セル と セル の 間隔 を 指定 する 


ICO がり 【UJU 9 いる 


健 セル と ヤル の 則 | 定 する icrosoft Inte ロ |X セル と セル の 間 陣 を 指定 する - Mozill 


| 名 前 年 齢 性 別 
有 海 太郎 B2 陽 
也 海 道子 55 区 


名 前 年齢 性 別 
H 洛 太郎 2 男 
了 海 道子 55 区 








cellspacing 属性 は 、 各 セル と セル の 間隔 を 設定 し ます 。 
セル と 表 全 体 を 囲う 外 枠 の 間 も 同 じ 間隔 に な り ま す 。 ス タイ ル シ ー ト に も ゃ 同様 の 効 
果 の ある プロ パテ ィ (border-spacing) が あり ます 。 


LSomplo 生還 


<tab1e border="2" ce11spacing="0"> 

<tr><th> 名 前 </ th><th> 年 齢 </th><th> 性 別 </th></ 上 ェ > 
<tr><td> 北海 太郎 </Ld><td>32</td><d> 男 </ 上 d></ 上 > 
< 上 ><d> 北海 道子 </td><td>25</d><d> 女 </ td></ テ > 
</tab1e> 


<tab1e border="2" ce11spacing="8"> 

< 上 ェ ><th> 名 前 </ th><th> 年 齢 </th><thz> 性 別 </ 上 h></ 上 エ > 
< 上 r><Ed> 北海 太郎 </td><td>32</td><td> 男 </ 上 d>< / 上 エッ 
<tr><d> 北海 道子 </td><td>25</td><d> 女 </ 上 d></ 上 テッ 
</tab1e> 


<tab1e border="2" ce11spacing="16"> 

<t><th> 名 前 </ th><th> 年 齢 </th><th> 性 別 </th></ 上 エ > 
<tr><d> 北海 太郎 </td><td>32</d><d> 男 </ 上 d></ 上 エエ > 
<tr><Ed> 北海 道子 </td><td>25</ 上 d><d> 女 </ 上 d></t エ > 
</tab1e> 





G 


に | 議 ョ 選 
E 記 語 
Q 回 届 
ヨ =】 いら 


加 加 民 
< 区 に 


OperaZ 


Ope/a6 


Sa ね 


り ネ 5// 
左 2-ma 


swwa 上 





Firefox 
LWcg 介 








| 北 太郎 132 
| 北 道子 |55 | 女 

















北海 太朗 














北海 道子 





cellpadding 属性 は 、 セ ル の 枠 と 内 容 と の 間隔 を 設定 し ます 。 
スタ イル シー ト に も 同様 の 効果 の ある プロ パテ ィ (padding な ど ) が あり ます 。 


| 


<tab1e border="2" ce11paqding="0"> 

< 上 ><h> 名 前 </th><th> 年 齢 </ th><th> 性 別 </ th></tr> 
<tr><Ed> 北海 太郎 </td><td>32</td><td> 男 </td></t テ > 
<tr><Ed> 北海 道子 </ 上 d><td>25</td><td> 女 </td></t ァ > 
</tab1e> 


| 


<tab1e border="2" oe11padding="8"> 

<tr><th> 名 前 </h><th> 年 齢 </th><th> 性 別 </ th></tr> 
<tr><d> 北海 太郎 </td><td>32</td><d> 男 </ td></t エ > 
<tr><Ed> 北海 道子 </td><td>25</td><d> 女 </ td></tY> 
</tab1e> 


<tab1e border="2" ce11paqqing="16"> 

<tr><th> 名 前 </ th><th> 年 齢 </th><thz> 性 別 </ th></t ェ > 
<tr><d> 北海 太郎 </td><td>32</td><Ed> 男 </ td></ 上 ェ > 
<tr><d> 北海 道子 </Ld><td>25</td><d> 女 </ td></ 上 エッ 
</tab1e> 


⑳ スタ イル シー ト : [ボックス] の [内 容 の 周り の 空間 を 設定 する 」(P299) 。。 
パー カル 


hl 
いい トー】 


セル 内 で の 行 揃え と 縦 方 向 の 位置 を 指定 する 


<tr aHign=" 行 交え 位置" valign=" 位 置 ">ー</tr> 
<th aign=" 行 靖 え 位 諸 "valign=" 縦 位置 ">ー</th> の 
<td aign=" 彰 え 位置" Valign=" 位 置 ">ー</td> og 
<thead aiign=" 行 交 え 位置 " Valign=" 位 置 ">ー</thead> 
<tbody align=" 行 導 え 位置 "Valign=" 縮 位置 ">ー</tbody> 
<tfoot aign=" 交 え 位置 " valHign=" 位 置 ">ー</tfoot> 
<col align=" 行 謙 え 位置 " Valign=" 縦 位置 ">ー</col> 
<colgroup align=" 行 誠 え 位 閉 "valign=" 縦 位置 ">ー</colgroup> Opera6 


の 
left 左 揃 え (td 要素 の デフ ォ ル ト ) 
right 右 揃え 
center 中 央 揃え (th 要素 の デフ ォ ル ト ) 
justify 両端 揃え 


に ー 
hul 
Mn 
いこ 】 


加 加 に 回 
に に コト う ら 


top 日 ロ 
middle 中 央 (デフ ォ ル ト ) 
bottom IK 


baseline 横 方 向 の 列 で の 1 行 目 の バ ベー スラ イン 


Internet Explorer 6.0 HTYODST) 


呈 じ ル PC の 生 編 に 衝 方 の 人 放す の 昌 え と 直方 を 


5 .- Microsoft nternet . 層 ル 人 証する - Mozillo Firefox に 
ファ イル 述 集 5) 表示 ⑰ お 気 に 和 0Q) ウー ル ①D へ M7⑪ アイ ル ) 編集 D 表示 移動 ⑩ ブッ クマ -2B) ウー ル D AM2⑬ 
② 京 ・ の 国 還 人 め の Am 殆 5mD 征 - 呈 - 恨 の owlQ 








aligm="left align="center align= right・ Penr ich hp"center" ahign rieht" 


valim="top" 位置 位置 位置 wherertop” 年 A 位 胃 8 位置 











valign="middle” 
valign=~middle” 位置 D 














lvalign="bottom" | 位置 G 
valign=~bottom” 位置 G 位置 








align 属性 は セル 内 で の 行 捕 え を 、valign 属性 は セル 内 で の 縦 方 向 の 表示 位置 を 設定 
し まず す 。 
スタ イル シー ト に も ゃ 同様 の 効果 の ある プロ パテ ィ (texLalign と vertical-align) が あり ます 。 


デル の 











万 re7ox 
Moz//a 

| _MZ.X 
6.X 
4.X 








計 
5 





| ly 


<tab1e border="2"> 

< ヒエ > 
< 上 h></ 上 h> 
<th>a11gn=" ef 上 "</ 上 h> 
<th>a11qn=" Center"</ 上 h> 
<th>a11qgn=" て 1gh "</ 上 h> 

く /t 上 > 

< セ 上 ェ va1ign="EOp"> 
<th height="100">va1iqgn=" top"</Eh> 
<td a1ign="1eft"> 位置 A</td> 
<td a1ign="oenter"> 位置 B</td> 
<td a1ign="right"> 位置 で </td> 

< く / 上 > 

<tr Ya1ign="m1idd1e"> 
<th height="100">va1ign="midd1e"</ 上 h> 
<td al1ign="1eft"> 位置 D</td> 
<td a1ign="oenter"> 位置 </td> 
<td a1ign="right"> 位置 F</td> 

< く /t 上 > 

<tr va1ign="botom"> 
<th height="100">va1ign="bottom"</ 上 h> 
<td a1ign="1eft"> 位置 G</td> 
<td a1ign="oenter"> 位置 H</td> 
<td a1ign="right"> 位置 T</td> 

く / 上 エ > 

</tab1e> 


め 













OpeyaZ 
普通 の 状態 

北海 '〒123-4567 北海 道 札幌 市 中 央 区 大 通り 西 10 丁 の NF 1 3 ED 

天 郎 目 20-30 サー モン ビル 40F aa Sa ね // 


Opeya6 





改行 を 禁止 し た 杖 態 た 5-m 
| 独 |  、 合 Ema 
H 汰 太郎 |〒123-4567 北海 道 邊 市 中 央 区 大 通り 西 10 丁 H 浴 大 訪 |〒13-4567 北海 道 和 由 市 中 央 区 大 通り 西 10 十 目 20-30 サー モン ビル 40F 

肖 改行 を 禁止 し た 状態 








擬 澄 太朗 '〒123-4567 北門 寺 市 中 央 区 大 通り 西 10 目 20-3O サー モン ピル OF 





9 いる |) 








































名 前 | 60 住所 を 
有 海 太郎 |〒123-4567 北海 道 札幌 市 中 央 区 大 通り 西 10 丁 目 2 








人 | 123-4567 北海 道 札幌 市 中 
け を 


























住所 
|T 123-4567 北海 遂 札幌 市 中 央 区 大 通り 西 10 丁 目 20-3) サー モン ビル 40P 








上 


通常 、 セ モル の 表示 幅 は ウィ ンド ウ の 幅 に 合わ せ て 自動 的 に 調整 され る た め 、 セ ル 内 
の テキ スト が 長い 場合 に は 途中 で 改行 され て し まう こと が あり ます 。 そ の よう な 改 
行 を 禁止 する の が 、nowrap 属性 で す 。 

た だ し 、nowrap 属性 を 使用 する こと は 非 推 差 と され て お り 、 新 し い HTML の 標準 仁 
様 で は 使う こと が で き な く な っ て いま す 。 改行 を 禁止 する 場合 に は 、 で きる だ け ス 
タイ ル シ ー ト を 利用 する よう に し て くだ さい 。 
































も EE 王 妥 Ro つ ム くっ < ヘ ゝ , ヘ ・vx う 了 ラ トル = 
<tajb1e border="2"> 

<caption> 普通 の 状態 </caption> 

< ヒエ > 

<th> 名 前 </th> 

<th> 住所 </th> 

く / 上 エ > 

< ヒエ > 

<td> 北海 太郎 </d> 

<td> 〒 123-4567 北海 道 札幌 市 中 央 区 大 通り 西 10 丁目 20-30 J 
サー モン ビル 40F</td> 

く / 上 エ > 

</tab1e> 


リ ゴ 因 / 
/E5.5 
/ た 5.0 
リズ 


且 /e7oX 


oz 


<tab1e border="2"> 
<caption> 改行 を 禁止 し た 状態 </caption> 
で 上 エ > 

<th> 名 前 </th> 

<th> 住所 </th> 

く / 上 エ > 

< 上 エ > 

<td nowrap> 北海 太郎 </d> 

<td nowrap> 〒 123-4567 2 
-30 サー モン ビル 40F</td> 

</ 上 エ > 

</tab1e> 


表 や セル の 背景 色 を 指定 する 


問 回 
mm 
AM に 
に 】 (| 


に 
に 】 


に 
叶 
に 】 
に 3 


回 
還 
還 


トー 
いい 
に 3 





ヒー 
ぶ 
記 


42.X 


191 つ いる RI 


アル の ee 表示 


>) 表 





bgcolor 属 性 を 使用 する と 、 背 景色 を 指定 する こと が で きま す 。 

table 要素 に 指定 する と 表 全 体 に 、r 要素 に 指定 する と その 横 一 列 に 、h 要素 と td 要 
素 の 場合 は 、 そ の セル に 背景 色 が 適用 され ます 。 

た だ し 、bgcolor 属 性 を 使用 する こと は 非 推 装 と きれ て お り 、 新 し い HTML の 標準 仕 
様 で は 使う こと が で き な く な っ て いま す 。 背 景色 を 指定 する 場合 に は 、 で きる だ け 
スタ イル シー ト を 利用 する よう に し て くだ さい 。 


| Samplc 


<tab1e border="2" ce11padding="10"> 
< も tr bgoo1or="#009933"> 
<th> 名 前 </th> 
<Eh> 年 齢 </th> 
<th> 性 別 </th> 
< く / 上 テッ > 
ぐも デジ テ 
<td bgco1or="#EEcc00"> 北海 太郎 </td> 
< 上 d>32</d> 
<Ed> 男 </td> 
< く / 上 エ > 
< ヒエ > 
<td bgco1or="#EEcc00"> 北海 道子 </td> 
<td>25</ 上 d> 
<d> 女 </td> 
< く / 上 > 
</tab1e> 


*wwa 用 





万 7e7ox 
oz 
原 77 み 4 
|_A6X 

A42.X 


saww 用 








background 属性 を 使用 する と 、 背 景 画像 を 指定 する こと が で きま す 。 

table 要素 に 指定 する と 表 全 体 に 、r 要 素 に 指定 する と その 横 一 列 に 、 山 要素 と td 要 
素 の 場合 は その セル に 背景 画像 が 適用 され ます 。 

た だ し 、 こ の 属性 は 一 部 の プラ ウザ で は 利用 で きま す が 、 標 準 的 な 仕様 で は 定義 さき 
れ て いな いも の で す 。 背景 画像 を 指定 し た い 場合 に は 、 ス タイ ル シ ー ト を 利用 し て 
くだ さい 。 


ET7 補 舞 ーー 


<tab1e border="2" background="1eaveg.]Jpg" cel1padding="10"> 
<tr><th> 名 前 </ h><th> 年 齢 </h><th> 性 別 </ th></ 上 テ > 

<tr><d> 北海 太郎 </td><td>32</td><d> 男 </td></ 上 > 

<tr><d> 北海 道子 </td><td>25</ 上 d><d> 女 </ td></ 上 エ > 

</tab1e> 








語 誠 
は 軸 
に こ 】 し ら 」 


n 
al に 
( つ 


表 の 外 枠 の 太 さ を 指定 する 


万 
2 


に 
ざ 


e/ 


に 】 
ミ 





加 
RS 
mi 
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系 の 人 枠 の 大 





リリ ル 1 
/ 少 4 
2.X 


Sa ね が 


トコ 


名 前 年齢 性 別 
北海 太郎 32 易 
北海 道子 25 女 


圧 5- 
だ 4-ma 








border 属 性 は 、 表 全体 の 外 枠 の 太 き を 設定 し ます 。 
値 と し て 0 を 指定 する と 、 枠 が 表示 され な く な り ま す 。 ス タイ ル シ ー ト に も 同様 の 
効果 の ある プロ パテ ィ (border-width な ど ) が あり ます 。 


<tab1e border="0"> 

<tr><Eh> 名 前 </ th><h> 年 齢 </h><th> 性 別 </th></ 上 > 
<t ェ ><Ed> 北海 太郎 </td><td>32</td><td> 男 </td></ 上 > 
<tr><Ed> 北海 道子 </td><td>25</td><d> 女 </td></ 上 エッ > 
</tab1e> 





"www 用 


<tab1e border="8"> 

< 上 ><h> 名 前 </ th><th> 年 齢 </h><th> 性 別 </h></ エ > 
< 上 ><d> 北海 太郎 </td><td>32</ 上 d><d> 男 </td></ 上 ェ > 
<tr><Ed> 北海 道子 </td><td>25</td><d> 女 </td></ 上 > 
</tab1e> 


<tab1e border="16"> 

<tr><Eh> 名 前 </ th><th> 年 齢 </th><th> 性 別 </th></ 上 エ > 
<t>< ヒ d> 北海 太郎 </Ld><td>32</ 上 d><Ed> 男 </ td></ 上 エ > 
<tr><Ed> 北海 道子 </Ld><td>25</td><d> 女 </td></ 上 > 
</tab1e> 





表 の 外 枠 の 表示 形式 を 指定 する 


<table frame=" 人 外 秦 の 表示 形式 ">ー</table> 


妃 refox = 
oz 【 外 枠 の 表示 形式 】 


kihsi ii 
bl bal に ul 
3 


AZX void な し (デフ ォ ル ト ) above 上 の み 

W6.X below 下 の み Ihs 左 の み 
rhs 右 の み hsides 上 下 の み 
Vsides 左右 の み box 上 下 左右 





border 上 下 左右 


Internet Explorer 6.0 1 つい る 5 リ 
等 示 の 外 補 の 表示 形式 を 指定 する - Microzoft jnternet メ ま の 学 提 の 表 志 形式 を 定 する - Mozilla F 


プア ァイル MP 編 要 (EC) 表示 お気 に 入 D⑯ ツウ - ル ① AM2⑱ アイ ル (P 十 集 ) 表示 移動 ⑬ ブッ 2v- の 2⑧) ツー ル ①D へ 2 緒 


の 回 回 る の me 支 5 





話 5-mac 
左 4-mac 








名 前 年 齢 性 別 
北海 太郎 2 男 比 海 太郎 


北海 道子 55 女 比 海 道子 P5 




















(MD 電 D 表 示 O 5 稚 ) プ 52 マー208) ウー ル GD へ 20⑲ 


Q ゆ - 代 G の oe 
frame 属 性 


fnme=vold" fname=abowe~ fames below 
- な し - 上 の み のみ 


イル MD 電 康 ⑩) 表示 ⑰ お に AO ツール D AZ 


OR の 引 の の w 衣 meoo 
frame 属 性 


fname above 
上 の み 





fame="hsides「 fnamenvaides ame=Tlhs" 
- 上 下 の み - 左右 の み のみ 


fame= barder 


- 上 下 を 右 


saw 用 





frame 属性 は 、 表 全体 を 囲う 外 枠 の うち 、 上 下 左右 の どの 枠 を 表示 させ る か を 設定 し 
ます 。 


<tab1e border="4" Frame="hs1des"> 

< 上 エ ><Eh> 名 前 </ th><th> 年 齢 </th><th> 性 別 </ th></ 上 エ > 
<tr><dg> 北海 太郎 </td><td>32</td><Ed> 男 </td></ 上 エッ > 
<tr><td> 北海 道子 </td><td>25</td><d> 女 </td></ 上 > 
</tab1e> 


06 テー ブル 





表 内 の 枠 線 の 表示 形式 を 指定 する 


<table rules=" セル を 友 幼 る 直 の 表示 形 芝 "> 一 </table> 


me 
none な し (デフ ォ ル ト ) 

「OWS 横 列 の 境界 の み 

Cols 縦列 の 境界 の み 

groupS thead 要 素 ・tDody 要素 ・ tfoot 要素 ・ colgroup 要素 - cl 要素 の 境界 の み 

旨 すべ て の 境界 





Internet Explorer 6.0 9 いる RI 
良 内 の 枠 線 の 表示 形式 を 指定 する - Microsoft internet E 表 内 の 弁 康 の 表示 形式 を 指定 する - Mozilla Firefox 
アイ ル (P 選集 (5) 表示 ⑦ お 気 に 入 0⑳ ウー ル D ^J プ ⑪ アイ ル G 電 業 6) 表示 移 生 人 ⑮⑳ プッ クー が ウー ル D へ ルプ 3 


OO 回 加 人 の の we 支 Pmoo 





名 前 年 齢 性 別 
北海 太郎 82 男 
北海 道子 55 女 


ァイル の の LA 1 ッ ウール D へ ル 2 アル 組 業 D 表示 移動 プッ 2v-2⑤ ツー ル D へ ル 7⑯ 
の 回国 の ws 副 ym2o や ゆ 8G の om 


rules 属 性 rules 属 性 





rulee= rows ules-』 が rules="eroups ruleserows" 
横 の 列 の 拓 界 ー- な し - グル ー プ の 電界 構 の 列 の 境界 














つっ テー 











res="cols" 
り の 人 っ 
時 3 27. 


較 目 削 ミ ミミ 




















mules 属 性 は 、 セ モル を 区 切る 線 の うち 、 ど の 線 を 表示 させ る か を 設定 し ます 。 


EE 提 L_ 


<tab1e border="4" ru1es="co1g"> 

<t ェ ><Eh> 名 前 </th><thz> 年 齢 </h><th> 性 別 </th></t エ > 
<tr><d> 北海 太郎 </td><td>32</td><Ed> 男 </ td></t ェ > 
< 上 ><d> 北海 道子 </td><td>25</td><Ed> 女 </ td></ 上 エエ > 
</tab1e> 


⑲⑫ <thead>・<tbody>・<tfoot> : 「 テ ー ブ ル 」 の 「 横 列 を グル ー プ 化す る 」(P.88) 
<Colgroup> : 「 テ ー ブ ル 」 の 「 縦 多 を グル ー プ 化す る 」(P.90) 
<col> : 「 テ ー ブ ル 」 の 「 縦 列 に 属性 や スタ イル シー ト を 指定 する 」(P.92) 
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に 
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Sa ね // 
圧 5-ac 
話 4-ac 


sw 用 






Internet Explorer 6.0 
強 橋 列 を グル ー ブ 化 する - Microsr 


Firefox 1.0 





thead 要素 ・tbody 要素 ・tfoot 要素 は 、 い ずれ も 表 の 横 列 (r 要 素 ) を グル ー プ 化す る 要 
素 で す 。 グ ルー プ 化 する 部 分 が 表 の ヘッ ダ で あれ ば thead 要素 を 、 表 の 本 体 部 分 で あ 
れ ば tbody 要素 を 、 表 の フッ タ で あれ ば tfoo 要素 を 使用 し ます 。 

この よう に グル ー プ 化し て お く こ と で 、 そ の グル ー プ に 対し て 属性 や スタ イル シー 
ト を まとめ て 適用 で きる よう に な り ま す 。 ま た 、 プ ラウ ザ の 対応 次 第 で は 、 ヘ ッ ダ 
と フッ タ を 固定 し た 状態 で 本 体 部 分 を スク ロー ル さ せる こと や 、 複 数 ペー ジ に 渡る 
長い 表 を 印刷 する 場合 に 各 ペ ー ジ に ヘッ ダ と フッ タ を 印刷 させ る こと な ども 可能 に 
な り ま す 。 

これ ら の 要素 を 使用 する 場合 は 、 必 ず thead 要素 、tfoot 要素 、tbody 要素 の 順に な る 
よう に し て くだ さい 。 tbody 要素 より も 前 に tfoot 要 素 を 配置 する の は 、 ど の 程度 の ] 
さか わか ら な い 本 体 よ り も 先 に フッ タ を 表示 で きる よう に する た めで す 。 た だ し 、 
tfoot 要素 に 未 対 応 の ブラ ウザ で は 、 フ ッ タ を その まま 本 体 の 前 に 表示 し て し まい ま 
す の で 、 注 意 し て くだ さい 。 な お 、thead 要素 と tfoot 要素 は 、 ひ と つの テー ブル 内 に 
ひと つ ず つ し か 配置 で きま せん が 、tbody 要素 は 必要 に 応じ て 複数 配置 する こと が で 
きま す 。 





池 





ER 症 Eーーーーーーーーーー 


< て ab1e border="3" ce11padding="4"> 

<thead> 
< く キ エッ > 
<th> 集 容 数 </th><th> 札幌 店 </th><th> 旭川 店 </th><th> 小樽 店 </th> 
</ 上 エ > 

</thead> 

<tEoo セ > 
< ヒエ > 
<th> 合計 </ th><td>5 , 875</td><td>4 , 349</ 上 d><d>3 , 317</td> 
< く / 上 > 

< く / 上 Eoo キ > 

<tbodY> 
< 上 エッ > 
<td> 4 月 </t 上 d><d>2 , 085</td><Ed>1 , 605</ td><d>1 , 124</ 上 > 
< く / 上 エッ > 
< 上 エッ > 
<d>5 月 </ 上 d><td>1 , 866</ 上 d><d>1 , 289</t 上 d><Ed>1 , 002</ 上 d> 
</ 上 テ > 
< 上 エッ > 
<td>6 月 </td><td>1 , 924</ td><Ed> 1 , 455</ 上 d>< 上 d>1 , 191</ 上 d> 
< く / 上 > 

</ て tbody> 

</tab]e> 


【 ス タイ ル シ ー ト 】 
td { text-a1ign: right } 
thead, foot th { 
co]lor: #EFFFFf: 
background-co1or: #009933 
} 
tbody 【 
color: #000000: 
background-co1or: #EFcc00 
} 
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span 属性 は 、 表 の 縦列 を (構造 的 な 意味 で ) グ ルー プ 化 する 場合 に 利用 し ます 。 

これ に よっ て 、 複 数 の 縦列 に 対し て 、 幅 や 行 捕え な どの 属性 や スタ イル シー ト を ま 
と め て 指定 で きる よう に な り ま す 。 

設定 し た グル ー プ 内 で 、 さ ら に 縦列 に 対し て 個別 の 指定 を し た い 場 合 に は 、 次 項 で 
説明 する col 要素 を 使用 し ます 。 そ の 場合 は 、colgroup 要素 で span 属性 を 指定 せ ず に 、 
col 要素 側 で 指定 する よう に し て くだ さい 。 colgroup 要素 は 、 配置 する 位置 に 注意 が 
必要 で す 。caption 要素 の 直後 (な けれ ば table 要素 の 開始 タグ の 直後 ) で 、thead 要素 や 
r 要 素 より も 前 の 位置 に 配置 する よう に し て くだ さい 。 ま た 、 こ の 要素 の 内 容 と し て 
配置 で きる の は 、col 要素 だ け で す 。 


<tab1e border="3"> 

<caption>2005 年 の 釣果 ( 匹 ) </caption> 

<Co1group span="2" 1d="dateplace"></co1group> 

<co1group Span="3" 1qd="oCount" width="100" a1ign="right" ></co1group> 
< ヒエ > 

<Eh> 日 付 </th><th> 場所 </ th><th> アイ ナメ </ th><th> ヒラ メ </ th><th> ソイ </th> 
く / 上 エ > 

< ヒエ > 

<td>6 月 01 日 </ td><td> 余市 港 </ td><td>0</td><td>0</td><td>12</td> 

< く / 上 エエ > 

< 上 エッ > 

<td>6 月 15 日 </ td><td> 小樽 港 </td><td>2</td><td>0</ 上 d><d>8</td> 

< く / 上 > 

くも や > 

<td>6 月 2 6 日 </ td><tdz> 美国 漁港 </td><td>4</td><td>2</td><td>23</td> 








る 2509 


リル 
< ヒエ > 

リネ 徐 】 
<td>7 月 04 日 </td><tdg> 小樽 港 </ td><td> 0</ td><td>3</td><td>5</ 上 d> /E5.0 
の /g40 
</tab1e> - 
【 ス タイ ル シ ー ト 】 
co1group#datep1ace { 1 MZX 

co1or: #000000: | M6.X.. 


jackground-co1or: #FFcc00 
} 
th { text-a1ign: center } 


9 TIPS「I*」 に よる 幅 や 高 さ の 割合 の 指定 (P.137) = 


上 
制 
ー 
に 





表 の ヘッ ダ と フッ タ を 固定 し て 内 容 を スク ロー ル さ せる 


表 の 見 出し を 同定 し て 内 容 を スク ロー ル さ せる - Mozilla Firefox 


























1.654 


の 寺 加 商 上 


Netscape 6.0 以 降 で は 、 ス タイ ル シ ー ト を 利用 する こと で 、 表 の ヘッ ダ と フッ 
タ を 固定 し た 状態 で 本 体 を スク ロー ル さ せる こと が で きま す 。 ス タイ ル シ ー ト の 指 
定 は 、 以 下 の よ うに tbody 要素 の overflow プロ パテ ィ の 値 を 「auto」 に 設定 し て 、 
あと は height プロ パテ ィ で 高 さ を 指定 すれ ば OK で す 。 


tbody { overfl1ow: auto: height: 100px } 

た だ し 、 こ の よう に 指定 する と 、Windows 版 の Internet Explorer で は 各 tr 要 
素 の 高 さ が tbody 要素 に 指定 し た 高 さ に な っ て し まい ます 。 こ れ を 回 避 す る た め に 
は 、 同 時 に 次 の よう な 指定 も 入れ て お いて くだ さい 。 


tr { height: auto } 








ぶ 寺 計 商 作 l 








に 帳 性 や スタ イル シー 

















col 要素 は 、 表 の 縦列 を 構造 的 に グル ー プ 化す る の で は な く 、 縦 列 に 対し て 幅 や 行 揃 
えな どの 属性 や スタ イル シー ト を まとめ て 指定 し た い 場 合 に 利用 し ます 。 
配置 する 位置 は 、caption 要素 の 直後 (な けれ ば table 要素 の 開始 タグ の 直後 ) で 、thead 
要素 や 要素 より も 前 に な る よう に し て くだ さい 。 colgroup 要素 が ある 場合 は 、 そ の 
内 容 と し て 配置 する こと も で きま す 。 





| ) il 


< て ab1e border="3"> 

<caption>2005 年 の 釣果 ( 匹 ) </caption> 

<co1 1d="date"> 

<co1 1d="p1ace"> 

<co1 span="3" 1d="Count" width="100" a1ign="r1ght"> 

ベ ヒ エッ 

<th> 日 付 </th><th> 場所 </th><th> アイ ナメ </ て th><th> ヒラ メ </th><th> ソイ </th> 
く / エエ > 

< 上 エ > 

<td>6 月 01 日 </ td><td> 余市 港 </ td><td>0</ 上 d><td>0</td>< 上 d>12</ 上 d> 
く / 上 エッ > 

< ヒエ > 

<Ed>6 月 15 日 </td><d> 小樽 港 </ td><td>2</td><d>0</d>< 上 d>8</ 上 d> 
く / 上 エ > 

< キ ヒエ > 

<Ed>6 月 26 日 </ td><d> 美国 漁港 </ td><td>4</td><td>2</td><d>23</d> 
く / 上 エ > 

く キ ヒエ > 

<td>7 月 04 日 </td><td> 小樽 港 </ td><td>0</td><td>3</ 上 d>< 上 d>5</ 上 d> 

< く / 上 エ > 

</tab1e> 


【 ス タイ ル シ ー ト 】 
co1#date { 
color: #000000: 
background-co1or: #009933 
} 
co1#place { 
color: #000000: 
background-co1or: #EEcc00 
} 
th ( text-a1ign: center } 
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参加 者 リス ト 
名 前 年 齢 特別 

H 流 2 更 

狗 聞 5 区 


9 (いる | 





table 要素 の align 属性 で center を 指定 する と 、 表 を セン タリ ング し て 表示 し ます 。 
表 を center 要素 で 囲っ た 場合 と 同様 の 結果 に な り ま す 。 

た だ し 、align 属 性 を 使用 する こと は 非 推 状 と きれ て お り 、 新 し い HTML の 標準 仕様 
で は 使う こと が で き な く な っ て いま す 。 セ ンタ リン グ し た い 場 合 に は 、 で きる だ け 
スタ イル シー ト を 利用 する よう に し て くだ さい 。 


<tab1e border="2" a1ign="center"> 

<caption> 参加 者 リス ト </caption> 

<tr><th> 名 前 </ th><thz> 年 齢 </th><th> 性 別 </ th></ ェ > 
<tr><d> 北海 太郎 </td><td>32</td><d> 男 </ 上 d></ 上 > 
<t ェ ><td> 北海 道子 </td><td>25</td><d> 女 </ td></ 上 > 
</tab1e> 





ーー = 





IGG95t り 【 り OAI 


計 ま ( に テキ スト を 回 り 込 ませ る - Microsoft jntern 








集客 数 は 、 表 
人 よう な 結果 と な り 2 
ろ 、 そそ れ の 店 で T 


8 安定 し た 集客 数 を 確 れ 5 ho 
保 で き て いる よう で す 。 問 c 上 6 |L289 Ca 
正 は この 数 字 を どう と ら 四半 問題 は 、 kW | 
朱 あ < まで サン ブル で す 」 すこ O 宮 は あ ( ま で サン 還 語 5ma 
で 数 字 | T すれ の 店 舗 で も s ル で す の で 数 字 」 
1 て お 2 7 は あり ませ ん 。 し か し 、 いずれ の 牛 同 で b7 月 が DTC3775 店 4-ac 
えて いる と いう こと を 読み 取る こと が で きま す 。 今後 も Re OCS に お で 
' て デー タ を & 。 より 様々 な から 検 討 し て いく こと が 時 いう こ る こと が < て デー: 
人 GE ます 較 1 し より 翌々 な 方 面 か ら 検 対し て いく こと が 宣 押 だ と 思わ れ ます 。 


























table 要素 の align 属性 で left か right を 指定 する と 、 表 を 左 また は 右 に 配置 し て 、 そ の 
横 に テキ スト を 回 り 込ま せま す 。 

回 り 込み を 解除 し た い 場 合 に は 、<br> の clear 属 性 を 使用 し て くだ さい 。 

た だ し 、align 属 性 を 使う こと は 非 推 押 と きれ て お り 、 新 し い HTML の 標準 仕様 で は 
使う こと が で き な く な っ て いま す 。 テ キス ト を 回 り 込ま せる 場合 に は 、 で きる だ け 
スタ イル シー ト を 利用 する よう に し て くだ さい 。 


<tab1e border="3" ce]1padding="4" a1ign="right"> 

<thead> 

<tr><th> 集 容 数 </th><th> 札幌 店 </th><th> 旭川 店 </th><th> 小樽 店 </ th></t 上 > 
</ head> 

<tfFoot> 

<tr><th> 合計 </th><td>5 , 875</td><d>4 , 349</td><Ed>3 , 317</ 上 d></ 上 テッ > 
</tfFoo> 

<tbody> 

<tr><d>7 月 </td><td>2 , 085</ 上 d><d>1 , 605</td><d>1 , 124</t 上 d></ 上 エ > 
<tr><d>8 月 </td><td>1 , 866</td><d>1 , 289</td><d>1 , 002</td></ 上 エッ > 
<t エ ><Ed> 9 月 </td><td>1 , 924</ 上 d>< 上 d>1 , 455</ 上 d><td>1 , 191</ 上 d></ 上 テッ > 
</tbody> 

</tab1e> 

< く D> 

各店 舗 で の 集 容 数 は 、 表 に 示し た よう な 結果 と な り ま し た 。 (中略) 重要 だ と 思わ れ ま す 。 

<br cl1ear=" エ 1ght"> 

く /p> 





⑱ スタ イル シー ト : [表示 と 配置 の 「 左 右 へ の 配置 と 回り 込み を 指定 する ](P252) = 。 
デカ 5 





Le ウロ ーー ムトー 













各店 舗 で の 集客 数 は 、 E 1 昨 店 小 紛 店 
業 に 3 た よっ 結果 集客 数 札 由 店 旭川 店 小 相 
0 あま で | 2085 |1605 |1124 
店 舗 で 比較 89 安定 し た | | 明 _ raee 2sm ee 
1924 |1455 | 

5875 |4349 |3317 
































問題 は 、 この 数 字 を どう と ら え . 

で ワン ブル で す の で 攻 字 に 草 味 は あり ませ ん 。 ゆい いずれ 
の 店 舗 で も 7 月 が 最高 の 集客 数 と な っ て お り 、 8 月 に は いっ た ん 
は 8 に な っ て また 増え て し \ る と いう こと を 読み 取る 

こと が で きま す 。 今後 も 継続 し て デー タ を 記録 し 、 より 様々 な 方 
和紀 \ く こと が 重要 だ , : と 思わ れ ま す 。 





3( ひ る 













表 へ の 回 り 込み を 醍 除 す る - Mozilla Firefo 








各店 舗 で の 集客 数 は 、 表 に 

示し た よう な 結果 と な り まし ーー 要 店 旭川 店 | 小樽 店 
た 。 現在 まで の と ころ . それ | 凡 os | Les hsa 
ぞ れ の 店 舗 で 比較 的 安定 ーー 

し た 入 容 数 を 確保 で き て い | 月 |uaee | 男 
492 陸 叶 1.924 


合計 BE 875 ce 317 
問題 は 、 この 数 字 を どう と ら え る か な の で す が 、 こ の 表 は あく まで サ 
ンプ ル で す の で 数 字 に 意味 は あり ませ ん 。 し か し 、 いずれ の 店 舗 で 
も 7 月 が 最高 の 集客 数 と な っ て お り 、 8 月 に は いっ た ん 沙 ち 込ん で 、 
9 月 に な っ て また 増え て いる と いう こと を 読み 取る こと が で きま す 。 今 
後 も 継続 し て デー タ を 記録 し 、 より 様々 な 方 面 か ら 検討 し て いく こと 
が 重要 だ と 思わ れ ま す 。 




















ぶ 圭 思 其 上 l 

















br 要素 の clear 属 性 は 、 表 の 横 に テキ スト を 回 り 込 ませ て いる 状態 を 解除 し ます 。 
この 指定 以降 の テキ スト は 、 表 の 下 の 行 か ら 表 示さ れる よう に な り ま す 。 

た だ し 、clear 属 性 を 使う こと は 非 推奨 と され て お り 、 新 し い HTML の 標準 仕様 で は 
使う こと が で き な く な っ て いま す 。 テ キス ト の 回 り 込み を 解除 する 場合 に は 、 で き 
る だ け ス タイ ル シ ー ト を 利用 する よう に し て くだ さい 。 


6 デル 


<tab1]e border="3" ce11padding="4" a]1iqgn="right"> 

<thead> 

<tr><th> 集 容 数 </ th><th> 札幌 店 </ Eh><th> 旭川 店 </th><th> 小樽 店 </th></t エ > 
</thead> 

<tfoo セ > 

<tr><th> 合計 </ th><td> 5 , 875</ 上 d><td>4 , 349</td><d>3 , 317</td></ 上 エ > 
</tfoot> 

<body> 

< モテ ><Ed> 7 月 </ 上 d><d>2 , 085</ 上 d><Ed> 1 , 605</ 上 d><d> 1 , 124</ 上 d>< / 上 エ > 

< 上 r><d>8 月 </t 上 d><td>1 , 866</ 上 d><Ed> 1 , 289</ 上 d><d>1 , 002</ 上 d>< / 上 エ > 

< 上 ><d>9 月 </ td><td>1 , 924</ 上 d><Ed>1 , 455</td><d>1 , 191</ td></ 上 エ > 

</ て tbody> 

</tab1e> 

く Dp> 

各店 舗 で の 集客 数 は 、 表 に 示し た よう な 結果 と な り ま し た 。 現在 まで の と ころ 、 それ ぞ れ の 店 舗 で 
比較 的 安定 し た 集客 数 を 確 保 でき て いる よう で す 。 

<br clear="right"> 

問題 は 、 こ の 数 字 を どう と ら え る か な の で す が 、 この 表 は あく まで サン プル で す の て で 数 字 に 意味 は 
あり ませ ん 。 し が し 、 い ずれ の 店 舗 で も 7 月 が 最高 の 集客 数 と な っ て お り 、8 月 に は いっ た ん 落ち 
込ん で 、9 月 に な っ て また 増え て いる と いう こと を 読み 取る こと が で きま す 。 今後 も 継続 し て デー 
タ を 記録 し 、 よ りさ ま ざ ま な 方 面 か ら 検討 し て いく こと が 重要 だ と 思わ れ ま す 。 

< く /p> 
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の 寺 似 誠 l 


に に スエ ルル ト の 間隔 を 指 定 す る 





店 舗 で の 集 鶴 数 は 、 [= ニー ニュ ーー 8 
ON 集客 数 札幌 店 旭川 店 小樽 店 示し た よう な 結 果 と な り まし 
と な り ま し た 。 現在 まで Y た 。 現在 まで の と ころ 、 それ 
境 か それ の 店 舗 で 比較 的 定 
1noz し た 信和 数 を 確保 で き て い 
01 る よう で す . 問題 は 、 こ の 数 | に コー ロン 

5 と OK5XS か です 
)4349 |3417 に 5 の 
、 ル で す の で 数 字 に 意味 は 上 ー 
あく まで サン ブル で す の で 数 字 に 意味 は あり ませ ん 。 し か し 、 い nl 。 MY 7 
すれ の 店 舗 で 57 月 が 最高 の 集 宮 数 と な っ て お り 、 9 月 に は いっ | Srr 


人 いう こと を 読み 取る こよ が で きま す 。 人 績 し て デー タ を 記 


ーー 人 す ーー し より 生々 な 方 面 か ら 検 対し て いく こと が 和 明 だ と 思わ れ ます 。 























表 の 横 に テキ スト を 回 り 込 ませ た 場合 の 、 表 と テキ スト と の 間隔 を 設定 し ます 。 
vspace 属性 を 指定 する と 表 の 上 下 に 、hspace 属性 を 指定 する と 表 の 左右 に 指定 し た ビ 
クセ ル 数 の 空間 が で きま す 。 

た だ し 、 こ れ ら の 属性 は 一 部 の ブラ ウザ で は 利用 で きま す が 、 新 し い HTML の 標準 
的 な 仕様 で は 定義 8 され て いな いも の で す 。 間隔 を 空け た い 場合 に は 、 ス タイ ル シ ー 
ト の マー ジン な ど で 調 節 す る よう に し て くだ さい 。 


ET ーー 


<tab1e border="3" ce]11padding="4" a1ign="right" vspace="12" hspace="12"> 
<thead> 

<tr><th> 集客 数 </th><th> 札幌 店 </h><th> 旭川 店 </th><th> 小樽 店 </th></t> 
</thead> 

< 上 foot> 

<tr><th> 合計 </ th><td>5 , 875</td><d>4 , 349</td><d>3 , 317</td></ 上 > 
</tfFoo> 

<tbody> 

<t 上 ><d>7 月 </ td>< 上 d>2 , 085</ 上 d><td>1 , 605</td><td>1 , 124</td></ キ > 
<tr><d>8 月 </ td><td>1 , 866</td><d>1 , 289</td><d>1 , 002</ td></ 上 エ > 
<tr><d>9 月 </td><td>1 , 924</td><d>1 , 455</t 上 d><Ed>1 , 191</ 上 d></ 上 エ > 
</Ebody> 

</tab1e> 

で D ヶ 

名 店 舗 で の 集 容 数 は 、 表 に 示し た よう な 結果 と な り ま し た 。( 中 略 ) 重 要 だ と 思わ れ ま す 。 

<br c]ear="r1ght"> 

< く /p> 





ーー 生生 。 半 還 昌 ピ デー 


EGRSS curecdteee 
画像 を 配置 する 


<Hmg src=" URL" width=" 邦 " height=" 高 さ " alt=" 代替 テキ スト た "> 






URL 画像 ファ イル の URL 
幅 画像 の 幅 ( ピ クセ ル ・9%) 
高 さ 画像 の 高 さ で (ピクセル ・%⑳) 


代替 テキ スト 画像 の 代わ り の 役目 を する テキ スト 


1 づり 【 り xr っ まい Firefox 1.0 
衝 画像 を 配 汗 する - Microsoft nternet Explorer 
アイ ル (FE) 編集) 表示 ) お 気 に 入 D⑯ ウ - ル D へ JI プ ⑪ 


人 の の ws 宮 smD 








img 要素 で 、HTML 文書 内 に 画像 を 配置 し ます 。 

画像 の 形式 と し て は 、 一 般 に GIF 形式 ・JPEG 形式 ・ PNG 形式 が 利用 で きま す 。 

幅 と 高き に つい て は 、 画 像 の 実際 の サイ ズ に 関わ ら ず 、 こ こ で 指定 し た 幅 と 高 さ で 表 
示さ れ ま す 。 こ れ ら の 指定 は 必須 で は あり ませ ん が 、 指 定 し て お く と 画像 以降 の 内 容 
を 早く 表示 させ る こと が で きま す 。 

alt 属 性 に は 、 画 像 を 表示 で き な い 環境 で 画像 の 代わ り と し て 利用 する テキ スト を 指定 
し ます 。 内 容 と し て は 、 ど の よう な 画像 な の か を 説明 する の で は な く 、 そ の 画像 が 表 
示さ れ な いり 場合 に 画像 の 代わ り と し て の 役割 を 果たす よう な 内 容 を 、 前 後 関係 も よく 
考え た 上 で 入れ る よう に し て くだ さい 。 な お 、alt 属 性 は 省略 で きま せん の で 、 画 像 が 
特に 意味 の な い 飾 り で ある よう な 場合 に は 、 内 容 を 何 も 入 れず に 「alt=""」 と 指定 し て く 
だ さい 。 


Er 弓 


<D> 
<1mg sro="E1sh.Jpg" width="220" height="170" a1t=" カ クレ クマ ノミ > 
く /p> 


>) コラ ム 「alt 属性 に は 適切 な 代替 テキ スト を ! 」(P.108) 
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時 隊 の 久信 を 茹 寺 する 








リン ク し て いる 場合 リ 0 本 人 


※ 左 か ら 、 「border=~0"」「border 属 性 な し 」「border="5"」 ※ 左 か ら 、 「border="0 信 |。 5* 


信 |@|⑨|| | 合 


リン ク し て いな い 場 合 ② @| 


※ 左 か ら 、 「border 属 性 な し 」「border="2"」「border="5"」 ※ 左 か ら .「border 属 性 な し 」「border="27」「border=57」 





img 要素 の border 属性 は 、 画 像 の 周り に 表示 され る 枠 の 大 さ を 設定 し ます 。 

一 般 的 な プラ ウザ で は 、 通 常 は 枠 が 表示 され て いま せん が 、 こ の 属性 を 指定 する こと で 
画像 の 周囲 に 枠 が 表示 され る よう に な り ま す 。 ま た 、 画 像 を リン クタ させ る と 、 そ れ を 示 
す た め の 枠 が 自動 的 に 表示 され ます が 、 そ の 場合 の 枠 の 大 さも 同様 に 設定 で きま す 。 
た だ し 、border 属性 を 使う こと は 非 推 遂 と きれ て お り 、 新 し い HTML の 標準 仕様 で は 
使う こと が で き な く な っ て いま す 。 枠 の 大 さ を 設定 する 場合 に は 、 で きる だ け ス タイ 
ル シ ー ト を 利用 する よう に し て くだ さい 。 


Er 舞 ーー 

<h1> リン ク し て いる 場合 </h1> 

< く D> 

※ 左 か ら 、「border="0"」「border 属性 な し 」「border="5"」<br> 

<a href="anywhere .htm1 "> 

<img Sro="1mage.]pg" w1dth="140" height="100" a1 ヒ ="" border="0"></a> 
<a hrefF="anywhere .htm1 "> 

<1img sro="1mage.]pg" width="140" height="100" a1t=" "></a> 

<a hrefF="anywhere.htm1 "> 

<1mg Sroc="1mage.]pg" w1dth="140" height="100" a1t="" border="5"></a> 
く /p> 





<h1> リン ク し て いな い 場 合 </h1> 

で D テ 

※ 左 か ら 、「border 属性 な し 」「border=" 2 "」「border="5"」<br> 

<1mg Src="1mage.]pg" w1dth="140" height="100" a1t=""> 

<img src="1mage. pg" width="140" height="100" a1="" border="2"> 
<1mg Src="1mage.]pg" w1dth="140" height="100" a1t="" border="5 リ "> 
く /p> 


スタ イル シー ト : [ポックス] の [ 析 線 の 太 さ を 指定 する IP241) 


CSS で 画像 の 枠 を 設定 する 場合 の 問題 
Netscape Navigator 4.X で は 、 画 像 の 周り に 表示 させ る 枠 線 を 、CSS で 正 し 
く 設定 する こと が で きま せん ( 枠 線 が お か し な 部 分 に 表示 され ます )。 し た が っ て 、 


画像 を リン ク さ せ た 時 に 表示 され る 枠 線 を 消し た いよ うな 場合 に は 、 非 推奨 の border 
属性 を 使う こと も 仕方 が が いか も し れ ま せん 。 

し か し 、 ど うし て も 非 推奨 属性 を 使い た く な い 場 合 に は 、CSS で 部 分 的 に ag 要素 
の 色 を 背景 色 と 同じ に 設定 し て 枠 線 を 見 えな いよ うに する と いう 裏 ワ ザ 的 な 対処 法 
も あり ます 。 
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“ 3 押 
align 属 性 に 【3 md を 指定 align 属 性 に 3 middle を 指定 


align 属性 に 【3 lotton を 指定 Je は 電 | Peta 所 


align 属性 を 使用 する と 、 同 じ 行 の 中 に 画像 と テキ スト が 表示 され る 場合 の 、 画 像 と テ 

キス ト の 縦 の 位置 関係 を 設定 で きま す 。 

た だ し 、align 属性 を 使う こと は 非 推 差 と きれ て お り 、 新 し い HTML の 標準 仕様 で は 使 
うと で が で き な く 邊 な て VO まま 位置 関係 を 設定 する 場合 に は 、 で きる だ け ス タイ ル 
ー ト を 利用 する よう に し て くだ さい 。 








<p>a1 ign 属性 に 

<img Src="1eaf .gifF" width="80" height="80" a1t="" a1ign="top"> 
top を 指定 

< く /p> 

<p>a11gn 属性 に 

<1mg src="]eaf .g1F" width="80" height="80" a1t="" a1ign="midd1er> 
midd1e を 指定 

く /p> 

<p>a1ign 属性 に 

<1mg src="1eaf.gif" width="80" height="80" a1t="" a1ign="bottom"> 
bottom を 指定 

く /p> 


10 画 evk チ ディ 


イメ ー ジ マッ プ を 作成 する 


<img src=" ひ RE7 ア "alt=" 化 堆 テ キス た" usemmap="# マ ッ プ 名 "> 
<map narmne=" マッ プ 名 "> 一 </mmap> 

<area Shape=" 形 炎 " coordS=" 灰 硬 " href="E ア "alt=" 人 坪 テ チ 
スパ "> 








マッ プ 名 イメ ー ジ マッ プ の 名 前 
形状 rect( 四 角形 )・circle( 円 )・poly( 多 角形 )・default( 全 体 ) 
座標 形状 別 の 座標 値 


Internct Explorer 6.0 Firefox 1.0 
筆 イ メー ジャップ を 作成 する - Micro. ラマ ッ プ を 作成 する - Mozills Firefox | 区 


= イメ 
ファ イル (F) 編集 (E) 表示 お気 に 入 0⑳ ウー ル ①D へ ルプ ⑪ アイ ル (F) 編集) 表示 移動 ⑬⑮ ブッ 2Cー ク ⑧ ツー- ル ①D AZ⑱ 鳩 


GO ・ の 回 司る の 実 52D 

















アイ ル ) 編集 ) 表示 お 気 に 和 DO ウー ル ① へ ルプ ⑬ 


@ ま の 回 回 人 の の we 案 iwoo 








アイ ル (P) 訪 集 E) 表示 お 気 に ADQ ツー ル MD へ ルプ ⑪ 


@・ の 還 還 の の 時 害 smo20 

















F を 
アイ ル (P) 編集 CE) 表示 (⑦ お気 に 和 D⑯) ツ - ル D ムル ブ (⑪ 


GO 回 回 人 る の mw 家 iwow 























イメ ー ジ マッ プ と は 、 画 像 の 特定 の 領域 が リン ク に な っ て いる も の で す 。 map 要素 は 、 
その 内 容 が イメ ー ジ マッ プ の 定義 で も や る こと を 示し 、 そ の 定義 部 分 に 名 前 を 付け ます 。 
map 要素 内 で 、 実 際 に クリ ッ ク に 反応 する 領域 と その リン ク 先 を 設定 する の が area 要 
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素 で す 。area 要素 に は 、 リ ンク 先 を 示す 代 准 テキ スト を 必ず 指定 し て お いて くだ さい 。 
後 は 、 img 要素 の usemap 属性 で 、 定 義 し た イメ ー ジ マッ プ の 名 前 を 指定 すれ ば (名 前 
の 前 に は 「#| を 付け ます )、 画 像 が イメ ー ジ マッ プ と し て 機能 する よう に な り ま す 。 
area 要素 の coords 属性 で 指定 する 座標 の 指定 方 法 は 、shape 属性 で 指定 する 領域 の 形状 
に よっ て 異な り ま す 。 指定 方 法 は 次 の 通り で 、 各 座標 値 は ピク セル 単位 で 「,] で 区 切っ 
て 指定 し ます 。 


ーーーー 


<d1V> 

<1mg Sro="nav.d1fF" usemap=" 韻 naVDarr PO 
width="422" height="44"> 

<map name="naybar リ "> 

<area href="prev.htm1" shape="rect 上 " a1 モ =" 前 ペー ジ ・ 
coordg="113,12,183,36"> 

<area href="tOp.htm1" shape="rect 上 " a1 モ =" ト ッ プ ペー ジ の 
coords="199,2,241,41"> 

<area href="nexxt .htm1" shape="reo" 2 
coordg="258,12,327,36"> 

< く /map> 

< く /d1Y ッ > 





coords 属性 で の 座標 の 指定 方 法 


四角 形 (rect) の 場合 「 左 上 の X 座 標 「 左 上 の Y 座 標 ]「 右 下 の X 座 標 ][ 右 下 の Y 上 座標 
円 (Circle) の 場合 「 中 心 の X 座 標 ]「 中 心 の Y 座 標 」「 半 径 ] 9 
多角 形 (poly) の 場合 すべ て の 衣 の 座標 を [X 座 標 「Y 座 標 」 の 順 で 指定 

(た だ し 、 最 初 と 最後 は 同じ 座標 を 指定 する 必要 が あり ます ) 


X=0,Y=0 =113,Y=12 。X=199,Y=2  X=258,Y=12 


Co 
さ CV AOD MI が 4 紀 


X=183.Y=36 。X=241.Y=41 X=327,Y=36  X=422,.Y=44 








画像 に テキ スト を 回 り 込ま せる 


ル 
いま す の で 、 以前 に くら べ る と 飼育 も 楽 
期 際 の 涯 を 入れ て お < こと で 、 さら に 水槽 内 の 環境 が 良く な る よ 
で す 。 こ の 岩 は 、 ライ ブロ ッ ク と 呼ば れ て お り 、 現在 で は 主 に 海外 
か ら 輸 入 さ れ た も の が 販売 され て いる よう で す 。 


も か わい い 種 類 で す . ふわ ふわ と し 

ト の よう 7a 骸 手 の あ る ハタ ゴイ 

ク が 大 好き で 、 いつ も 気持 ちよ 

n は 、 水 替 

ジー 

避 育 も 

に な り ま し た 。 また 、 様々 な 付着 生物 が 生き た まま 付い て いる 環 

入れ て お < こと で . さら に 水 椿 内 の 環境 が 良く な る よう 

で す 。 この 岩 は 、 ライ ブロ ッ ク と 呼ば れ て お り . 現在 で は 主 に 海外 
か ら 輸 入 され た も の が 販売 され て いる よう で す 。 


6 特 テ キ ス 


Ga Vn* 
いて WSUMEUTE 





クレ クマ ノミ は . クマ ノミ の 中 で も 小さ く て 
て も か わい い 種 類 で す 。 ふわ ふわ と し た 
ー ペ ッ ト の よう な 触手 の ある ハタ ゴイ ソ ギ 
チャ ク が 大 好き で 、 いつ も 気持 ちよ さそ う 
寄り 洗っ て いま す 。 最近 は 、 水 替え の 必 
な い フ ィ ル ター な と や 発売 され て いま 
す の で 、 以前 に くら べ る と 飼育 も 楽に が り ま 
し た 。 ま た 、 様々 な 付着 生物 が 生き た まま 付い て いる 玖珂 確 の 岩 
を 入れ て お く こ と で 、 さら に 水 椿 内 の 環境 が 良く な る よう で す 。 こ の 
岩 は 、 ライ ブロ ッ ク と 呼ば れ て お り 、 現在 で は 主 に 海外 か ら 輸 入 さ 
れ た や の が 販売 され て いる よう で す 。 


カク レク マ ノ ミ は 、 クマ ノミ の 中 で も 小さ く て 

と て も か わい い 種 類 で す 。 ふわ ふわ と し た 

カー ペッ ト の よう な 触手 の ある ハタ ゴイ ソ ギ 

ンチ ャ ク が 大 好き で 、 いつ も 気持 ちよ さそ う . 

に 寄り 添っ て いま す 。 最近 は 、 水 替え の 必 

要 の な い フ ィ ル ター な と や も 発売 され て いま 

す の で 、 以前 に くら べ る と 飼育 も 楽に な り ま 

し た 。 ま た 、 様々 な 付着 生物 が 生き た まま 付い て いる 瑞 黄 磁 の 岩 
を 入れ て お く こ と で 、 さら に 水槽 内 の 環境 が が 良く な る よう で す 。 こ の 
岩 は 、 ライ ブロ ッ ク と 呼ば れ て お り 、 現在 で は 主 に 海外 か ら 輸 入 さ 
れ た や の が 販売 され て いる よう で す 。 





内 





img 要素 の align 属性 で 、 画 像 を 左 ま た は 右 に 配置 する と 、 そ の 横 に テキ スト を 回 り 込 
ませ ます 。 

回 り 込 み を 解除 し た い 場 合 に は 、br 要素 の clear 属性 を 使用 し て くだ さい 。 

た だ し 、align 属性 を 使う こと は 非 推 差 と され て お り 、 新 し い HTML の 標準 仕様 で は 使 
うこ と が で き な く な っ て いま す 。 テ キス ト を 回 り 込 ませ る 場合 に は 、 で きる だ け ス タ 
イル シー ト を 利用 する よう に し て くだ さい 。 


< く D> 
<img src="fFish1 .]pg" wi1dth="155" height="120" a1t="" a1ign="1eft 上 "> 
カク レク マ ノ ミ は 、 ク マ ノ ミ の 中 で も 小さ く て と て も か わい い 種 類 で す 。 (中略 ) こ の 岩 は 、 ライ ブ 
ロッ ク と 呼ば れ て お り 、 現在 で は 主 に 海外 か ら 輸 入 さ れ た も の が 販売 され て いる よう で す 。 4 
<br clear="1eft 上 "> 

< く /D> 

<D> 

<img src="fFish2 .]Jpg" w1dth="155" height="120" a1t="" a11gn=" ァ right"> 
カク レク マ ノ ミ は 、 ク マ ノ ミ の 中 で も 小さ く て と て も か わい い 種 類 で す 。( 中 略 ) こ の 岩 は 、 2 
ロッ ク と 呼ば れ て お り 、 現在 で は 主 に 海外 か ら 輸 人 され た も の が 販売 され て いる よう で す 。 

<br clear="right"> 

く /p> 
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の 中隊 本 rc 守 縮 国 





oe 
画像 へ の 回 り 込 み を 解除 する 


< く Ir clear=" どちら 人 箇 の 画 依 の 局 り 込み を 解 原 す る か "> 





【 と どちら 側 の 画像 の 回 り 込 み を 解除 する か 】 





left 左側 の 画像 に 対す る 回 り 込 み を 解除 
right 右側 の 画像 に 対す る 回 り 込 み を 解除 
引 両側 の 画像 に 対す る 回 り 込 み を 解除 









Internet Explorer 6.0 


カク レク マミ は 、 ク 
と て も か わい い 種 類 で す 。 
に カ 


と し 
の よう a 航 手 の ある ハタ ゴイ 
ャ ク が 大 好き で 、 いつ も 気持 ちよ 


必要 の な い フ ィ ル ター 
る と 飼育 も 楽に な り 





Firefox 1.0 
画 人 へ る - Mc の ロ 


アイ ル (FE) 罰 B FCW 珍 動 ① プッ v-2⑧ ツー ル D AO 9 


和 を - ゆ 星人 @ の omm 尽 


よう な 能 手 の ある ハタ ゴ 
ンチ ャ ク が 大 好き で 、 いつ も 気持 ちよ さ 
に 寄り 添っ て いま す 。 


最近 は 、 水 替え の 必要 の な い プ 」 
の で 、 以前 に くち べ る と 飼育 や 楽に が 


br 要素 の clear 属性 は 、 画 像 の 横 に テキ スト を 回 り 込 ませ て いる 状態 を 解除 し ます 。 
この 指定 以降 の テキ スト は 、 画 像 の 下 の 行か ら 表 示さ れる よう に な り ま す 。 
た だ し 、clear 属 性 を 使う こと は 非 推 状 と され て お り 、 新 し い HTML の 標準 仕様 で は 使 


うこ と が で き な く な っ て いま す 。 テ キス ト の 回 り 込 み を 解除 する 場合 に は 、 で きる だ 
け ス タイ ル シ ー ト を 利用 する よう に し て くだ さい 。 


EYEL_L__ 





ーー 
ーーー ゴ 
画 
を 
く D> 
d 
を 
四 <br c1ear="1eE モ "> 
す 
る く /p> 
ぐ D ロ > 


<1mg sro="fish1 .Jpg" width="155" height="120" a]1t="" a]1ign=" 1eft"> 
カク レク マ ノ ミ は 、( 中 略 ) い つも 気持 ちよ さそ うに 寄り 添っ て いま す 。 


最近 は 、( 中 略 ) 前 に くら べ る と 飼育 も 楽に な り ま し た 。 


<1mg sro="fish2 .]pg" width="155" height="120" a1t="" a1ign="riqht"> 
カク レク マ ノ ミ は 、( 中 略 ) い つも 気持 ちよ さそ うに 寄り 添っ て いま す 。 ( 


<br Cc1ea エ =" ェ 1ght"> 





最近 は 、( 中 略 ) 以 前 に くら べ ぺる と 飼育 も 楽に は り ま し た 。 


く /p> 


>) スタ イル シー ト : 「 表 示 と 配置 」 の 「 回 り 込 み を 解除 する 」(P.254) 


106 Er チ メ ティア 


せ た テ キス ト の 間隔 を 指定 す 


Internet Explorer 6.0 
計 押 殺 と 回 り 込 ませ た テキ スト の 間 放 を 指定 する - Microgoft jp 


カク レク マ ベ ペ は 、 クマ ノミ の 中 で 
も | さく て と て も か わい い 種 類 で 
す . ふわ ふわ と し た カー ベッ ト の 
よう な 骨 手 の ある ハタ ゴイ ソ ギ ン 
チャ ク が 大 好き で . いつ も 気持 
ちよ さそ うに 寄り 添っ て いま す 。 
最近 は 、 水 替 え の 必 要 の な い フ 
ィ ルター な ども 発売 され て いま す 
の で 、 以前 に くら ぺる と 飼育 も 楽に まり まし た 。 また 、 様々 な 付 
着 生物 が 生き た まま 付い て いる 末 瑞 陰 の 震 を 入れ て お < こと 
で 、 さら に 水槽 内 の 環境 が 良く な る よう で す 。 こ の 涯 は 、 ライ ブ 
ロッ ク と 呼ば れ て お り 、 現在 で は 主 に 海外 か ら 輸入 され た も の 
が 販売 され て いる よう で す 。 


カク レク マ ノ ミ は . クマ ノミ の 中 で 

も 小さ く < て と て も か わい い 種 類 で 

す 。 ふわ ふわ と し た カー ベッ ト の 

よう な 触手 の ある ハタ ゴイ ソ ギ ン 

チャ ク が 大 好き で 、 い つも 気持 

ちよ さそ うに 寄り 添っ て いま す 。 

最近 は 、 水 替 え の 必要 の な い フ 

イル ター な ども 発売 され て いま す 

の で 、 以前 に くら べ る と 師 育 も 楽に は り ま し た 。 また 、 様々 な 付 
着 生物 が 生き た まま 付い て いる 環 黄 磁 の 者 を 入れ て お < こ と 
で 、 さら に 水 内 の 環境 が 良く な る よう で す 。 こ の 岩 は 、 ライ ブ 
ロッ ク と 呼ば れ て お り 、 現在 で は 主 に 海外 か ら 輸入 され た も の 
が 販売 され て いる よう で す 。 






画像 の 横 に テキ スト を 回 り 込 ませ た 場合 の 、 画 像 と テキ スト と の 間隔 を 設定 し ます 。 
vspace 属性 を 指定 する と 画像 の 上 下 に 、hspace 属性 を 指定 する と 画像 の 左右 に 指定 し 





た ピク セル 数 の 空間 が で きま す 。 


た だ し 、vspace 属性 と hspace 属性 は いずれ も 非 推 差 と され て お り 、 新 し い HTML の 標 
準 仕様 で は 使う こと が で き な く な っ て いま す 。 間 隔 を 空け た い 場合 に は 、 で きる だ け 
スタ イル シー ト の マー ジン な ど で 調 節 す る よう に し て くだ さい 。 


<D> 


<img sro="Fish1 .]pg" w1dth="155" height="120" a1t="" 


Yspace="12" hspace="24"> 


/ 間 大 " 


カク レク マ ノ ミ は 、 クマ ノミ の 中 で も 小 Sa ね / 
さく て と て も か わい い 種 類 で す 。 ふわ 

ふわ と し た カー ペッ ト の よう な 削 手 の /E5-ma 
ある ハタ ゴイ ソ ギ ンチ ャ ク が 大 好き 4 

で 、 いつ も 気持 ちよ さそ うに 寄り 洗っ /E4-mac 
て いま す 。 最 近 は 、 水 替え の 必要 の 

な い フ ブフ ィ ルター な と や 発売 さて て いま mo 
す の で 、 以前 に くち べ る と 餅 育 も 楽に 二 月 4 
な り ま し た 。 ま た 、 様々 な 付着 生物 が 生き た まま 付い て いる 瑞 区 礁 

の 岩 を 入れ て お く こ と で 、 さら に 水槽 内 の 環境 が 良く な る よう で す 。 

この 岩 は 、 ライ ブロ ッ ク と 呼ば れ て お り 、 現在 で は 主 に 海外 か ら 幅 入 

され た も の が 販売 され て いる よう で す 。 


カク レク マ ノ ミ は . クマ ノミ の 中 で も 小 
きく て と て も か わい い 種 類 で す 。 ふわ 
ふわ と し た ト の よう な 航 手 の 
ある ハタ ゴイ ソ ギ ンチ ャ ク が 大 好き 
で 、 いつ も 気持 ちよ さそ うに 寄り 涯 っ 
て いま す 。 最近 は 、 水 替え の 必要 の 
な い フ ィ ル ター な ょ や も 発売 され て いま 
、 以前 に くち べ る と 飼育 も 楽に 
な り ま し た 。 また 、 様々 な 付着 生物 が 生き た まま 付い て いる 瑞 敬 礁 
の 岩 を 入れ て お く こと で 、 さら に 水槽 内 の 環境 が 良く な る よう で す 。 
この 岩 は 、 ライ ブロ ッ ク と 呼ば れ て お り 、 現在 で は 主 に 海外 か ら 輸 入 、 
され た も の が 販売 され て いる よう で す 。 


の 中 障 本 rc 人 薄 国 








Sa ね が 
話 5-mac 
/E4-mac 


9 リコ 
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カク レク マ ノ ミ は 、 ク マ ノ ミ の 中 で も 小さ く て と て も か わい い 種 類 で す 。 ふわ ふわ と し た カー ペッ 
ト の よう な 触手 の ある ハタ ゴイ ソン ギン チャ ク が 大 好き で 、 い つも 気持 ちよ さそ うに 寄り 添っ て い 
ます 。 最近 は 、 水 替え の 必要 の な い フ ィ ル ター な ども 発売 され て いま す の で 、 以前 に くら べ る と 
育 も 楽に な り ま し た 。 ま た 、 さ ま ざ ま な 付着 生物 が 生き た まま 付い て いる 理 ⑧ 再 礁 の 岩 を 入れ て 
お く こ と で 、 さ ら に 水槽 内 の 環境 が 良く な る よう で す 。 こ の 岩 は 、 ラ イブ ロッ ク と 呼ば れ て お り 
現在 で は 主 に 海外 か ら 輸 人 され た も の が 販売 され て いる よう で す 。 

<Dbr clear="]1eft"> 

く /D> 

く D> 

<1mg src="fFish2 .]pg" width="155" height="120" a]1t="" 人 
Yspace="12" hspace="24"> 

カク レク マ ノ ミ は 、 ク マ ノ ミ の 中 で も 小さ く て と て も か わい い 種 類 で す 。 ふわふわ と し た カー ペッ 
ト の よう な 触手 の ある ハタ ゴイ ソ ギ ンチ ャ ク が 大 好き で 、 い つも 気持 ちよ さそ うに 寄り 添っ て い 
ます 。 最近 は 、 水 替え の 必要 の な い フ ィ ル ター な ども 発売 され て いま す の で 、 以前 に くら べ る と 
飼育 も 楽に な お な り ま し た 。 また 、 さ ま ざ ま な 付着 生物 が 生き た まま 付い て いる 理 再 礁 の 涯 を 入れ て 
お く こ と で 、 さ ら に 水槽 内 の 環境 が 良く な る よう で す 。 こ の 岩 は 、 ラ イプ ロッ ク と 呼ば れ て お り 、 
現在 で は 主 に 海外 か ら 輸 入 さ れ た も の が 販売 され て いる よう で す 。 

<br clear="riqght"> 

く /p> 











3A ま 





alt 属性 に は 適切 な 代替 テキ スト を ! 

テキ スト ブラ ウザ や 音声 ブラ ウザ な ど で さ ま ざ ま な ホー ムペ ー ジ を 見 て (読み 上 げ 
て ) いる と 、 時 々 意味 が わか ら な く な る こと が あり ます 。 そ し て 、 そ の 原因 の うち 、 
も っ と も 多い と 思わ れる の が 、 画 像 の 代替 テキ スト の 不備 で す 。 

代替 テキ スト が な けれ ば 当然 その 部 分 の 情報 は 欠落 し ます し 、 特 に 画像 が リン ク 
と し て 使用 され て いる 場合 に は 、 リ ンク 自体 が 利用 で き な く な っ た り 、 何 の リン ク 
か が わか ら な い 状 態 と な り ま す 。 ま た 、 代 替 テ キス ト が 付け られ て いて も 、 そ の 内 
容 が 不適 切 で われ ば 、 か えっ て 意味 が わか ら な く な る こと も あり ます 。 

画像 に 代替 テキ スト を 付け る の は も ちろ ん で す が 、 そ の 内 容 を 考え る 場合 に は 「 も 
し 、 画 像 を 配置 する こと を や め て 、 そ の 部 分 を テキ スト で 表現 する と し た ら ど う 書 
く か ]」 を 想像 し て みる と 、 適 切な も の が 思い 浮か が ぶ か も し れ ま せん 。 








さま ざま な 形式 の デー タ を 配置 する 


る 





object 要素 は 、 さ ま ざ ま な 形式 の デー タ を 配置 する こと の で きる 汎用 的 な 要素 で す 。 
具体 的 に は 、 画 像 動画 ・TAVA アプ レッ ト ・ プ ラグ イン デー タ ・ 他 の HTML 文書 な ど を 
配置 する こと が で きま す 。 こ の 要素 の 特徴 は 、 指定 し た 形式 の デー タ を ブラ ウザ が 取り 
扱う こと が で きる 場合 に は 、<object> ~ </object> の 間 の 内 容 を 無視 する こと で す (param 
要素 と map 要素 は 除く )。 し た が っ て 、 配 置き せ た い デー タ 形 式 順に object 要素 を 入れ 
子 に し て お く と 、 プ ラウ ザ が 利用 可能 な デー タ 形 式 が あっ た 時 点 で それ を 配置 し て 、 き 
ら に 深い 人 入れ 子 と な っ て いる 別 の 形式 を 無視 する こと に な り ま す 。 

た だ し 、 現在 の と ころ 、 こ の 要素 に 正しく 対応 し て いる プラ ウザ は 多く は な いよ う で す 。 


※ こ の 要素 は 多く の 種類 の デー タ 形 式 を サポ ー ト し て いる た め 、 実 際 に は さら に 多く 
の 属性 が あり ます が 、 こ こ で は 省略 し て いま す 。 


Sanplr 王 還 


<D> 
<ob]ect data="Fireworkgs .mpeg" type="app1ication/mpeg"> 
<ob]ect data="fFireworkg.g1F" type="image/g1f"> 

色 鮮やか な 花 炎 が 印象 的 だ っ た 。 

</object> 

</object> 

</p> 
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| <embed src=" DRr' width=" 大 "height=" 高 ">ー</embed> 


<noembed> 一 </noembed> 

Fefox 際 | 
頭 r が 人 。 URL プラグ イン が 使用 する デー タ の URL 

昌 7 あ 人 蛋 ピク セル 

暗 7 あ 信 高 さ ピク セル 
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【 捕獲 の 方 法 】 
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110 画像 と マル チ メ デ ィ ア 


embed 要素 は 、 プ ラグ イン 機能 を 利用 する 場合 に 使用 する 要素 で す 。 

この 要素 は 、object 要素 が 定義 され る 以前 に 一 部 の プラ ウザ が 独自 に 採用 し た も の で 、 
標準 的 な 仕様 で は 定義 8 され て いな いも の で す 。 

基本 的 に は 、 上 の 書式 で 紹介 し た 属性 が 利用 で きま す が 、 使 用 する プラ グイ ン に よっ 
て 他 の さま ざま な 属性 が 利用 可能 で す 。 詳 し く は 、 各 プラ グイ ン の マニ ュ ア ル な ど を 
参照 し て くだ さい 。 

noembed 要素 に は 、 プ ラグ イン が 利用 で き な い 場合 に 表示 きせ た い 内 容 を 入れ て お き 
ます 。 こ こ で 指定 し た 内 容 は 、 プ ラグ イン が 利用 可能 な 場合 に は 表示 され ませ ん 。 


<d1> 

<embed 5rC="Crab98 .dcr" width="464" height="372"> 

<noembed> 

この シミ ュ レ ーション を 実行 する た め に は 、<a href="http: / /www.macromedia.com/]Jp/ 
down1oads/ ">Macromedia Shockwave Player</a> が 必要 で す 。<a href="about 」 
sg1m.htm1"> シ ミュ レー ショ ン の 内 容 を 紹介 </a> し て いる ペー ジ も あり ます 。 

</noembed> 

</d1V> 
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JAVA アプ レッ ト を 配置 する 






applet 要素 は 、 JAVA アプ レッ ト を 利用 する 場合 に 使用 する 要素 で す 。 

実際 に は 、 上 の 書式 で 紹介 し た 属性 以外 に も 利用 可能 な 属性 が あり ます が 、 こ こ で は 
省略 し ます 。<applet> ~ </applet> の 範囲 に は 、JAVA アプ レッ ト が 利用 で き な い 場合 
に 表示 きせ た い 内 容 を 入れ て お きま す 。 こ こ で 指定 し た 内 容 は 、 JAVA が 動作 可能 な 
場合 に は 表示 され ませ ん 。 

param 要素 を 利用 する と 、 JAVA アプレット を 実行 する 時 に 必要 な 値 を 指定 し て お く こ 
と が で きま す 。 こ の 場合 、param 要素 は <applet> - </applet> の 範囲 の 最初 に 記述 し て 
22SV38 

な お 、applet 要素 を 使う こと は 非 推 状 と され て お り 、 代 わり に object 要素 を 使う こと が 
推奨 され て いま す 。 JAVA に つい て の 詳細 は 、 専 門 書 を 参照 し て くだ さい 。 


< く D> 


<app1et code="co1orchart.c1asg" width="475" height="400"> 
JAVA が 利用 で き な い 環境 の 方 は 、<a href="co1orchart2 .htm1 "> 
カラ ー チ ャ ー ト 2</a> を ご 利用 くだ さい 。 


</app1et> 
く /p> 





<form action=" DE ア " method=" 送 依 形式 " enctype=" 7 万 
多 プ 0 
target=" ウィン だ の ウ 名 "> 一 </form> 


URL 送信 され た フォ ー ム を 処理 する プロ グラ ム の URL 
送信 形式 get( デ フォ ルト )・post 

MIME タ イプ post 形 式 で 内 容 を 送信 する 際 の MIME タイ プ 

ウィ ンド ウ 名 送信 し た 結果 を 表示 する ウィ ンド ウ ま た は フレ ー ム 名 


Internet Explorer 6.0 






講 フォ ー ム を 作る tern 
アイル) 編集 ⑤D お 
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@m・ の 回 回 
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form 要素 は 、 そ の 内 容 が 送信 可能 な 入力 フォ ー ム で ある こと を 示し ます 。 

入力 され た 内 容 の 送り 先 や 送信 方 法 に つい て も 、 こ の 要素 の 属性 で 指定 し ます 。<form> 
ェ ー マ /form> の 範囲 に は 、 ま ず p 要素 な どの プロ ッ ク レ ベル 要素 を 配置 し て 、 そ の 中 に 入 
力 や 選択 に 必要 と な る 要素 (input 要素 ・button 要素 ・select 要素 ・textarea 要素 な ど ) を 人 人 
れる よう に し て くだ さい 。 内 容 と し て 用 意 し た 送信 ボタ ン (input 要素 か button 要素 で 
「type="submit'] が 指定 され て いる も の ) が 押さ れる と 、 フ ォ ー ム の 内 容 が 送信 され ます 。 
送信 形式 に は 、「gei」 と 「posi」 の 2 種類 が あり ます 。「getl を 指定 する と 、 入 力 さ れ た デー 
タ は 、action 属性 で 指定 され て いる URL の 後に 「?] 記 号 で 連結 され た 状態 で 送信 され ま 
す 。 こ の 形式 は 、 サ ー チ エン ジン な ど で よ く 利 用 され て いま す 。「postl は 、 送 信 す る 内 
容 が 日 本 語 で デー タ 量 が 多い 場合 な ど に 使用 され る 形式 で 、 入 力 さ れ た 内 容 を URL に 
連結 する こと な く 、 デ ー タ と し て 送信 し ます 。 

enctype 属性 で 指定 する MIME タ イプ は 、 デ フォ ルト で は [「applicadonX-www-form- 
urlencoded] に な っ て いま す 。 通常 は これ を 利用 し て CGI で 処理 を 行い ます が 、 input 要 
素 の 「type="file"] で ファ イル を 送信 する よう な 場合 に は 、MIME タイ プ に [multparform- 
datal を 指定 し て くだ さい 。 
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form 要素 は 、 そ の 内 容 を 送信 する こと を 前 提 と し て いる た め 、 送 信 先 を 示す action 属 
性 は 必ず 指定 する こと に な っ て いま す 。 内 容 を 送信 する 必要 が な いり 場合 に は 、fom 要 
素 を 使用 せ ず に 入力 フィ ー ル ド や ボタ ン 、 メ ニュ ー な ど を 直接 配置 し て くだ さい (た だ 
し 、Netscape Navigator 4.X の 場合 は 、form 要素 の 中 に 配置 し な けれ ば 表示 され な く な 


り ま す )。 


度 EE 


<Eorm acion=" /Cgi-b1n/Formmmai1 .Cg1" method="post 上 "> 


<D> 
<1abe1 
<1npu 
<1abe1 
<1npu 上 
く /p> 
<D> 
<1nput 
<1abe1 
<inpu 上 
<1abe1 
</p> 
<D> 
<1npu 上 
<1nput 
< く /p> 


</ Eorm> 


For="nm"> お 名 前 : </1abe1> 

type="Eext" name="namae" 1d="nm"><Dr> 
for="ma"> メー ル : </1abe1> 

type="Etext" name="ema11" 1d="ma"> 


type="radio" name="sex" value="male" 1d="sm"> 
For="sm"> 男 性 </1abe1> 

type="radio" name="sex" value="Female" 1d="sf"> 
For="sF"> 女性 </1abe1> 


type="submit" value=" 送 信 "> 
type="reset" value=" リ セッ ト "> 





ITOi(G8 の 1 り 【 り (JAU 
と ど 43(: 





デフ ォ ル ト の 状態 : ln 


ラベ ル を 指定 し た 状態 : 謗 信 





デフ ォ ル ト の 状態 : 
ラベ ル を 指定 し た 状態 : 


input 要素 の 「type="submitr'] で 、form 要素 の 設定 に し た が っ て 、 フ ォ ー ム 内 の デー タ を 
送信 する た め の ボ タン を 作成 し ます 。 

value 属性 を 指定 する と 、 ボ タン 上 に 表示 され る 文字 を 指定 する こと が で きま す 。 特に 
指定 し な か っ た 場合 に は 、 プ ラウ ザ が デフ ォ ル ト の 文字 を 表示 させ ます (デフ ォ ル ト の 
文字 は プラ ウザ に よっ て 異な り ま す )。 別 の 処理 を させ た い 複数 の 送信 ボタ ン を 配置 す 
る 場合 に は 、name 届 性 で を それぞれ 別 の 名 前 を 付け て お く こ と で 判別 で きる よう に な り 
ます 。 


EE 人 昌 ___ 


< く D> 
デフ ォ ル ト の 状態 : 

<1nput type="submit"> 

< く /p> 

く D> 

ラベ ル を 指定 し た 状態 : 

<1nput type="submit" va1ue=" 送 信 "> 
く /p> 
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当 リセ ッ ト ポ タン を 作る - Microsoft Imternet Ex 









デフ ォ ル ト の 状態 : 加 叶 
ラベ ル を 指定 し た 状態: 
9 ひい る RU リ 


リセット 二 タ ン を 作る - Mozilla Firefo 


アイ ル ⑤ 編集 FR 移動 ⑮ ze D ^ 





input 要素 の 「type="reset'] は 、 フ ォ ー ム の すべ て の 内 容 を 初期 値 に 戻す た め の ボ タン を 
作成 し ます 。 

value 属性 を 指定 する と 、 ボ タン 上 に 表示 され る 文字 を 指定 する こと が で きま す 。 特に 
指定 し な か っ た 場合 に は 、 プ ラウ ザ が デフ ォ ル ト の 文字 を 表示 させ ます (デフ ォ ル ト の 














文字 は プラ ウザ に よっ て 異な り ま す )。 


ET 


< く D> 

デフ ォ ル ト の 状態 : 

<1nput type="rGSet"> 

く /p> 

く D> 

ラベ ル を 指定 し た 状態 : 

<input type="reset" value=" 内 容 を 初期 状態 に 戻す "> 
く /p> 
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汎用 的 な ボタ ン を 作る 
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下 の ボ タン を クリ ッ ク す る と 、 前 の ペー ジ に 戻り ます 。 


input 要素 の 「type="button'] で 、 送 信 ち も リセット も し な い 汎 用 の ボタ ン を 作成 し ます 。 
一 般 的 に は 、onClick な どの イベ ント 属性 を 利用 し て 、JavaScript な どの スク リプ ト 言 
語 と 組み 合わ せ て 使用 され ます 。 


Lani 


< く D> 
下 の ボ タン を クリ ッ ク す る と 、 前 の ペー ジ に 戻り ます 。<br> 

<input type="button" value=" 戻 る " onC1ick="history.go ( -1 ) "> 
く /p> 
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像 で 送信 ポタ ン を 作る 


<input type= "image' src=" 0R7 ア "name=" 名 前 "alt=" 化 替 テ キス た " 
ai8gn= Ll 蘭 置 " > 





UHFL ボタ ン と し て 使用 する 画像 ファ イル の URL 
名 前 ボタ ン の 名 前 

代替 テキ スト 画像 の 代わ り と な る テキ スト 

05 引 

top 画像 の 上 と テキ スト の 上 を 揃え る 


middle 画像 の 中 心 と テキ スト の ベー スラ イン を 揃え る 
bottom 画像 の 下 と テキ スト の ベー スラ イン を 揃え る (デフ ォ ル ト ) 
left 画像 を 左 に 配置 し 、 右 側 に 文字 を 回 り 込 ませ る 
right 画像 を 右 に 配置 し 、 左 側 に 文字 を 回 り 込 ませ る 


Internet Explorer 6.0 Firefox 1.0 
画 佑 で 送信 系 タン を 作る - Mozilla Firefox 


アイ ル (⑦ 旨 集 ) 表示 移動 ⑬ プッ クマ -2(B) ウー ル D へ 3* 


を - ゅ -@G の owlG 


往 画像 て 送信 砂 タ ン を 作る - Microgoft Internet 
アイ ル (P) 緒 集 G) 表示 お 気 に 入 D(⑱ ツー ル D へ ルプ ⑪ 


@ 京 ・ の 図 還る の 叶 次 5m9 


am 








の = 


通常 、 送 信 ボ タン に は <input type="submit"> を 使用 し ます が 、 画 像 を 送信 ボタ ン と し 
て 機能 さき せる こと も で きま す 。 そ の 場合 、 フ ォ ー ム の 内 容 と 共に 画像 の クリ ッ ク さ れ 
た 位置 (座標 ) も 送信 きれ ます 。 

画像 を 送信 ボタ ン と し て 使用 する 場合 に は 、 画 像 が 表示 され な く て も 送信 が で きる よう 
に 、 必ず at 属性 で 代替 テキ スト を 指定 し て お く よ う に し て くだ さい 。 た だ し 、 古い ブ 
ラウ ザ の 中 に は 、 name 属性 や value 属性 の 値 を 代替 テキ スト と し て 使用 する も の も ある 
よう で す 。 align 属性 は 、 通 常 の 画像 の 場合 と 同様 に 表示 位置 を 設定 し ます 。 テ キス ト が 
回 り 込 むように 設定 し た 場合 は 、<br clear=" 解 秦 方 急 "> で 解除 する こと が で きま す 。 

た だ し 、align 属性 や clear 属性 は 非 推 装 と され て お り 、 新 し い HTML の 標準 仕様 で は 
使う こと が で き な く な っ て いま す 。 テ キス ト を 回 り 込 ませ た り 、 そ れ を 解除 する 場合 
に は 、 で きる だ け ス タイ ル シ ー ト を 利用 する よう に し て くだ さい 。 


| Samplp 


<Dp> 
<1nput type="image" 5rc="gubmit.g1f" name="submit" a1t=" 送 信 "> 
く /p> 





(⑳2 <br clear"ー"> : [画像 と マル チ メ ディ ア ] の [画像 へ の 回 り 込 み を 解除 する 」 (P.106) 
スタ イル シー ト : 「 表 示 と 配置 」 の 「 左 右 へ の 配置 と 回 りら 込み を 指定 する 」 (P.252) 
スタ イル シー ト : 「 表 示 と 配置 」 の 「 回 り 込み を 解除 する 」 (P.254) 
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/ ゴ 崩 / 


自由 に デザ イン で きる ボタ ン を 作る 5 
<button type=" タ イプ" name=" 名 章 " Value=" 送 大 方 "> 一 /E4.0 
1 re7ox 

ツイ / た | 
名 前 ボタ ン の 名 前 


送信 値 ボタ ン の 名 前 と と も に 送信 され る 値 

Submit 送信 ボタ ン (デフ ォ ル ト ) 
reset リセ ッ ト ボ タン 

button 汎用 ボタ ン 


Internet Explorer 6.0 1913( い る 


記 自由 に デザ サイ ン で きる 不 タ ン を 作る 
プイ ル (5 編集 (E) 表示 お 気 に 入 0⑯ ウ - ル D AM2⑪ 


GO 回 加 の の wm 家 pmoo 


白 由 に テ ザ イ ン で きる 木 タン を 作る - Mozilla Firefox 
プア ァイル) 編集 表示 ⑦ 移動 ⑬ ブッ 2 マー の B) ツー- ル ① ヘル プ ⑪D 


で - ゆ - 昌 @G の om 世 








button 要素 は 、 ボ タン 作成 専用 の 要素 で す 。 

type 属性 で 指定 する 値 に よっ て 、 送 信 ボ タン ・ リ セッ ト ボ タン ・ 汎 用 ボタ ン の それ ぞ れ 
の 機能 を 果たす こと が で きま す 。 ま た 、 こ の ボタ ン の 場合 は 、<button> ~ </button> の 
範囲 に 配置 され た 内 容 ( テ キス ト 関 連 の 要素 や 画像 な ど ) を ボタ ン の ラベ ル と し て 表示 
させ る こと が で きま す 。 name 属性 と value 属性 で 示す 値 は 、 別 の 処理 を させ た い 複 数 
の 送信 ボタ ン を 配置 する 場合 に 、 受 信 側 で どの 送信 ボタ ン が 押さ れ た か を 見 分 ける た 
め な ど に 利用 きれ ます 。 


|Samplo 王 還 


<D> 
<button type="8ubmit" name="gubmit" value="new"> 

<1mg Src="new.g1fF" width="65" height="50" a]1t=""><b エ > 
<strong> 新規 </strong> 

< く / Dut て on> 

<jbutton type="gubmit" name="gubmit" va1ue="mod1iEy"> 
<1mg src="modify.giF" width="65" height="50" a]1t=""><b エ > 
<strong> 変更 </strong> 

</button> 

く /p> 








/E6.0 itconSeRfESe 


<input type="text" mame=" 名 前 "Value=" デフ ォ ル 文字 " 
Size=" 旋 " B 
maxlength=" 最大 文字 数 "> 






名 前 入力 フィ ー ル ド の 名 前 
デフ ォ ルト 文字 あらかじめ 入力 され て いる 文字 
4 四 入力 フィ ー ル ド の 幅 (文字 数 ) 

el 最大 文字 数 入力 可能 な 最大 の 文字 数 


ICOd い で り 【 り rd リリ 
osoft Internet Explorer 


f る 
W 。 お気 に 和 AD⑩ ツー ル ①D へ ルプ 


G*・ の 回 回 人 の の 支 pro 























OOe 
Firefox 1.0 
ーーーー ゴ 

2 input 要素 の [type="text'] で 、1 行 の テキ スト 入力 フィ ー ル ド を 作成 し ます 。 
name 属性 で 指定 する 名 前 は 、 フ ォ ー ム の 内 容 を 受信 し た 時 に デー タ を 見 分 ける た め な 
7 な ど に 使用 きれ ます 。 
を 
| ETOE 間 LLL__ 
る an 


く D> 

<1abe] for="nm"> お 名 前 : </1abe1> 

<1nput type="Eext" name="namae" size="30" 1d="nm'> 
く /p> 


>) <label for="ー"> : 「 フ ォ ー ム 」 の 「 ラ ベル テキ スト と 項目 を 一 体 化 さ せる 」 (P.132) 


120 還 記 


店 
の 
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複数 行 の 入力 フィ ー ル ド を 作る 


<textarea name=" 名 剖 " roWs=" 行 数 " cols=" 厚 "> 一 </textarea> 


名 前 入力 フィ ー ル ド の 名 前 
行 数 入力 フィ ー ル ド の 行 数 
幅 入力 フィ ー ル ド の 幅 (文字 数 ) 


Internet Explorer 6.0 


記 神 数 行 の 入力 フィ ー ル ド を 作る - Microsoft Internet Explo 


9 ひる きり 





textarea 要素 は 、 複 数 行 の テキ スト 入力 フィ ー ル ド を 作成 し ます 。 

<textarea> ー </textarea> の 範囲 に 記述 し た 文字 は 、 こ の フィ ー ル ド に あら か じ め 入 力 き 
れ た 状態 で 表示 され ます 。 name 属性 で 指定 する 名 前 は 、 フ ォ ー ム の 内 容 を 受信 し た 時 
に デー タ を 見 分 ける た め な ど に 使用 され ます 。 rows 属 性 と cols 属性 は 入力 フィ ー ル ド 
の 大 き さ を 決定 する も の で 、 必 ず 指 定 す る こと に な っ て いま す 。 


EETTT 王 遇 L__ ーー 一 


<D> 

ご 感想 : <br> 

<texxtarea name="kansou" rows="6" co1s="40"> こ こ に ご 感想 を どう ぞ 。 
</ て ea エ @a> 

く /D> 


t⑳2 <abel for="ー ツ > : 「 フ ォ ー ム ] の 「 ラ ベル テキ スト こと 項目 を 一 体 化 させ る 」 (P.132) 
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Ope7gZ 
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ト EJE7// 


圧 5-mac 
話 4-mac 


od 


ぶ 某 球 ト ー さ ココ 上 









パス ワー ド の 入力 フィ ー ル ド を 作る 


<3mput type="password" narme=" 名 状 " Yalue=" デフ ォ ル 文字 " 
SiZe='"' 訪 " maxlength=" 最大 文字 数 "> 






万 re7ox 


=|= 当 当 ヨ 
国民 回 団 国 思 
に 3 に ゴト コ に こ 】 に 】56 ご ) 


oz/a 

名 前 入力 フィ ー ル ド の 名 前 

デフ ォ ル ト 文 字 あら か じ め 入 力 さ れ て いる 文字 

幅 入力 フィ ー ル ド の 幅 (文字 数 ) 
Py 最大 字 入力 可能 な 最大 の 文字 数 
Opera6 Internet Explorer 6.0 


委 バス リー ド の 入力 フィ ー ル ド を 作る - M 


5a ね // 


存 5-mac 
夏 4-mac 





/-/ode 


ワー ド の 入力 フィ ー ル ド を 作る - Mozjlla Firefox 


input 要素 の 「type="password"] で 、 パ スワ ー ド の 入力 に 使用 する 1 行 の テキ スト 入力 
フィ ー ル ド を 作成 し ます 。 

この フィ ー ル ド に 入力 し た 文字 は 、 他 の 文字 や 記号 な ど に 置き 換え られ て 表示 され ま 
す 。 name 属性 で 指定 する 名 前 は 、 フ ォ ー ム の 内 容 を 受信 し た 時 に デー タ を 見 分 ける た 
め な ど に 使用 され ます 。 


音 ee 


<D> 

<1abe] for="pw"> パス ワー ド : </1abe1> 

<1nput type="pa88word" name="pword" size="20" 1d="Dw"> 
く /p> 





ぶ 圭 褒 ト ー さ ミコ 用 


⑫ <label for デ ー"> : 「 フ ォ ー ム 」 の 「 ラ ベル テキ スト と 項目 を 一 体 化 さ せる 」 (P.135) 


122 フォ ー ム な 











和義 生 Mewoo2atG8R5EStctaeSiEMAReG 


表示 され な い フ ィ ー ル ド を 作る 
<input type="hiddlen"' name=" 名 前 " value=" 送 太 値 "> 





名 前 フィ ー ル ド の 名 前 
送信 値 送信 する 文字 


1G い ta いり 【) rd 191 い る WI 


と まち ) フ ィ ー ル ド を 作る - Microsoft Internet Explorer 
アイ ル (F) 札 集 ) 表示 (⑦ お 気 に 和 DO ツー ル D AM プ ⑩ 


OR の 回 還 る の 実 sm 


C) ロ 


ーー ゴイ | \ 全 (因り セット 
き ( 計 リセ ッ ト | 
に 





input 要素 の 「type="hidden" は 、 画 面 上 に は 表示 され な い フ ィ ー ル ド を 作成 し ます 。 
一 般 に 、 ユ ー ザ ー に 見 せる 必要 の な い 特 定 の 値 を 、CGI プロ グラ ム に 送信 し た い 場 合 
な ど に 使用 し ます 。value 属性 で 指定 し た 内 容 が 、 固 定 値 と し て 送信 され ます 。 name 
属性 で 指定 する 名 前 は 、 フ ォ ー ム の 内 容 を 受信 し た 側が この デー タ を 見 分 ける た め に 
使用 され ます 。 


Son 


<fEorm action=" /cgi-bin/fFormmai1 .cg1" method="post"> 

< く D テ > 

<input type="hidden" name="reoipient" Ya1ue="hirokoGzSpC .COm"> 
<input type="hidden" name="subject" value=" ユ ー ザ ー 登 録 "> 
<1abe1 for="nm"> お 名 前 : </1abe1> 

<1nput type="text" name="namae" 1d="nm"><b エ > 

<1abe] for="ma"> メー ル : </1abe1> 

<1nput type="text" name="emai]1" 1d="ma"> 

く /p> 

く D> 

<1nput type="radio" name="Sex" Value="male" 1d="Sm"> 
<1abe1 for="sm"> 男 性 </1abe1> 

<1nput type="rad1o" name="Sex" value="Female" 1d="gsF"> 
<1abe1 for="sfF"> 女 性 </1abe1> 

く /p> 

ぐ D> 

<input type="submit" value=" 送 信 "> 

<1nput type="reset" value=" リ セッ ト "> 

< く /p> 

</ form> 





//re7ox 
oz 罰 a 


に 


円 思 加 国 加 
| 回 国 団 回 
に 3 に 】 に 】 1 に ) 


ヒコ 
に 3】 
< 


【 の リリ コバ リア 4 


三 
ト ol 
トコ 


Opera6 


Sa ね 


た 5-mac 
た 4-mac 








右 re7ox 
の 7/ た 】 


Sa ね / 
圧 5-mac 
左 4-ac 


ルリ リコ 


ーー 
| 
オ 
1 
を 
作 
る 


4 放 計 












<input type="radio"' name=" 名 前 "Value=" 送 佑 文 字 "> 


<3mput type="radio" name=" 名 状 " Value=" 送 大 文字 " cnecrred> 





名 前 ラジ オ ボ タ ン の 名 前 
送信 文字 選択 され た 結果 と し て 送信 され る 文字 
checked あら か じ め 選 択 され た 状態 に する 場合 に 指定 


Internet Explorer 6.0 Firefox 1.0 





input 要素 の 「type='radio"] で 、 ラ ジオ ボタ ン を 作成 し ます 。 

ラジ オ ボ タ ン は 、 複 数 の 選択 項目 の うち ひと つ だ け 選 択 で きる 形式 の ボタ ン で す 。 共 
通 の 項目 に 対す る 選択 肢 と し て 使用 する ラジ オ ボ タ ン に は 、 す べ て 同じ 名 前 を 指定 す 
る 必要 が あり ます 。 ま た 、 デ ー タ が 送信 され た 時 に どの 項目 が 選択 され た の か を 判別 
する た め に 、value 属性 に は 個別 の 値 を 指定 する よう に し て くだ さい 。 


EE 抽 = 


< く D> 
@ こ の 本 の 内 容 は いか か で し た か の <br> 

<1nput type="radio" names"book" value="best" 1d="V5"> 
<1abe] For="v5"> 最高 </1abe1> 

<1nput type="radio" name="book" value="good" 1d="v4"> 
<1abe] for="v4"> 良い </1abe1> 

<1nput type="radio"r name="book" value="norma1" checjked 1d="vV3"> 
<1abe1 for="v3"> 普通 </1abe]> 

<1nput type="radio" name="book" va1ue="bad" 1d="V2"> 
<1abe] for="v2"> 悪い </1abe1> 

<1nput type="radio" name="book" value="worgt" 1d="v1"> 
<1abe] For="v1"> 最 悪 </1abe1> 

く /p> 


2) <label for デ ー"> : 「 フ ォ ー ム 」 の 「 ラ ベル テキ スト と 項目 を 一 体 化 させ る 」 (P.132) 
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名 前 チェ ッ ク ボ ックス の 名 前 
送信 文字 。 選択 され た 結果 と し て 送信 され る 文字 科 
checked あら か じ め 選 択 され た 状態 に する 場合 に 指定 


上 コト ヒコ 
に 1 
に 3 トコ 


Opera7 


Internet Explorer 6.0 Ope/a6 


た 7 
在 5-7ac 


圧 4-7ac 





node 


input 要素 の 「type="checkbox"] で 、 チ ェ ッ クボ ックス を 作成 し ます 。 

チェ ッ ク ボ ックス は 、 複 数 の 選択 項目 の 中 か ら 該 当 す る 項目 を 複数 選択 で きる よう に 
する 場合 に 使用 し ます 。 共通 の 項目 に 対す る 選択 肢 と し て 使用 する チェ ッ ク ボ ックス 
は 、 す べ て 同じ 名 前 を 指定 する 必要 が あり ます 。 ま た 、 デ ー タ が 送信 され た 時 に どの 
項目 が 選択 され た の か を 判別 する た め に 、value 属性 に は 個別 の 値 を 指定 する よう に し 
て くだ さい 。 


< く D> 

人 @ 好 き な 色 は ⑦ <br> 

<input type="checkbox" name="color" value="white" oheoked 1d="C1"> 
<1abe] for="c1"> 白 </1abe1> 

<1nput type="checkbox" name="Co1or" value="b1ack" 1d="C2 リ "> 
<1abe]1 for="c2"> 黒 </1abe1> 

<input type="checkbox" name="Co1or" value="gray" 1d="C3"> 
<1abe] for="c3"> グ レー</1abe1> 

<1nput type="checjkbox" name="oco1or" va1ue="red" 1d="C4 リ > 
<1abe] for="c4"> 赤 </1abe1> 

<1input type="oheckbox" name="Co1or" value="b1ue" 1d="C5"> 
<1abe] for="c5"> 青 </1abe1> 

<1nput type="oheokbox" name="co1or" Ya1ue="ye11ow" 1d="C6"> 
<1abe] for="c6"> 黄 </1abe1> 

く /p> 
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(⑳2 <label for="ー"> : 「 フ ォ ー ム 」 の 「 ラ ベル テキ スト と 項目 を 一 体 化 させ る 」 (P.138) 





還 
LuW luW ul 
bl Jl Ed 
に 3 いら 】 に) 


/E4.0 <select name=" 名 凛 ">ー</select> 征 メ ニュ ー 全 体 
fye/ox <option Value=" 送 大 大 ">ー</option> 生 メニ ュー 項目 
<option selected> 一 </option> 符 メニュー 項目 
AZX | 

A6.X 名 前 メニ ュー の 名 前 


送信 値 選択 され た 結果 と し て 送信 され る 文字 
selected あら か じ め 選 択 され た 状態 に する 場合 に 指定 


Internet Explorer 6.0 


OperaZ 


Ope/ra6 19TC つ いる 








-77Oe 





select 要素 で 、 メ ニュ ー を 作成 し ます 。 

メニ ュー 全体 を <select> 一 </select> で 囲っ て 示し 、 そ の 中 に 選択 肢 を 表す <option> 一 
<7option> を 必要 な 数 だ け 配 置 し ます 。<option> </option> の 範囲 に は 、 実 際 に メ 
ニュ ー に 表示 され る 選択 肢 と な る テキ スト を 入れ ます 。 ま た 、value 属性 を 省略 し た 場 
合 に は 、 こ こ に 入れ た テキ スト 自体 が 選択 され た 項目 と し て 送信 され ます 。 


nl 


< く D> 
あな た の 年 齢 は 次 の どれ に 当て は まり ます か の <br> 
<se1ect name=" 年 齢 "> 
<option>10 代 </option> 
<option>20 代 </option> 
<option se1ected>30 代 </option> 
<option>40 代 </option> 
<option>50 代 </option> 
</ ge1ec セ > 
く /p> 


eawx-av 旧 l 


126 計 


dd 









メニ ュー の 選択 肢 を グル ー プ 化す る 


<optgroup 1abel=" グル ー プ 名 "> 一 </optgroup> グル ー プ を 作成 
<option label=" 短 (選択 大 "> 一 </option> を グル ー プ 内 の 項目 








グル ー プ 名 第 1 階層 で 表示 され る グル ー プ の タイ トル 
短い 選択 肢 グル ー プ 名 に 対応 させ た 第 階層 で 表示 され る 短い 選択 肢 


Internet Explorer 5 (Macintosh) IGT で り 【OYdN 
の 0 導 グ ル ニブ す る ヨメ ニュ - の 訳 馬 を グルーブ 仁 する 


人 合 天 ファイ ル 編集 ) 表示 D お 気 に 入 
更新 本 = ム 自重 入力 


OO の 回 の の Ws 安 5m20 








当 メニ ュー の 択 又 を グル ー ブ 化 する ter 
ファ イル 玉 集 ) 表示 び ) お 気 に 入 ル ① AM プ 2 


OG・ の 還る の we 宮 5mc9 
国 <E6x | 


Netscape Navigator 





select 要素 で 作成 され る メニ ュー の 選択 肢 を グル ー プ 化し ます (結果 と し て メニ ュー は 
階層 化 さ れ ま す )。 

optgroup 要素 の label 属 性 の 値 は 、 グ ルー プ ( 第 1 階層 ) の タイ トル と し て メニ ュー に 表 
示さ れる も の で す の で 、 必 ず 指 定 す る よう に し て くだ さい 。 option 要素 の label 属性 の 
値 に は 、 グ ルー プ 名 が 表示 され る こと に よっ て 省略 で きる 部 分 を 省 いた 短い 選択 肢 を 
指定 し ます 。 こ の 属性 を 省略 し た 場合 に は 、<option> ~ </option> の 範囲 に 指定 され て 
いる 内 容 が その まま 利用 され ます 。 
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ee 


く D> 
あな た が も っ と も 多く 利用 し て いる ブラ ウザ は どれ で すか <br> 
<select name="browser"> 
<optgroup 1abe1=" エ nterne Exxp1orer『> 
<option 1abe1="TE 6.x" va]lue="e6">TnEernet Exp1lorer 6 .X</option> 
<option 1abe1="TE 5.xx" value="e5">Tnternet Explorer 5.X</option> 
<option 1abe1="TE 4.xx" va]ue="e4">Tnternet Explorer 4.X</option> 
<option 1abe1="TE 3.xx" value="e3">Tnternet Explorer 3 .X</option> 
< く / OptgrOup> 
<optgroup 1abe1="Netscape Nay1gato ェ "> 
<option 1abe1="N 6.xx" value="n6">Netscape 6 .X</option> 
<option 1abe1="NN 4.xr" value="n4">Netscape Navigator 4.X</option> 
<option 1abe1="NN 3.xx" value="n3">Netscape Navigator 3.X</option> 
< く / Opt 上 OUup> 
<optgroup 1abe1="Lynx"> 
<option value="13">Lynx 3 .X</option> 
<option value="12">Lynx 2.X</option> 
<option value="]11">Lynx 1 .X</option> 
</ Optg9rOup> 
</se1ect> 
く /p> 





<select size=" 和 数 " name=" 名 前 " maultiple> 一 </select> 


符 リ スト ボッ クス 
<option value=" 送信 仁 ">ー</option> を 選択 項目 
<option se7ected> 一 </option> へ を 選択 項目 

行 数 リス ト ボ ックス の 表示 行 数 
名 前 リス ト ボ ックス の 名 前 


multiple 複数 の 項目 を 選択 可能 に する 場合 に 指定 
送信 値 選択 され た 結果 と し て 送信 され る 文字 
selected "あらかじめ 選択 され た 状態 に する 場合 に 指定 


ITCGitd9 い TU【UvddW Firefox 1.0 


リス トッ クス を 近 る - Mozilla Firefox 





メニ ュー を 作成 する select 要素 に size 属性 を 指定 する と 、 リ スト ボッ クス と し て 表示 さ 
れ ま す 。 

メニ ュー の 場合 と 同様 に 、 リ スト ボッ クス 全体 を <select> ~ </select> で 囲っ て 示し 、 
その 中 に 選択 肢 を 表す <option> 一 </option> を 必要 な 数 だ け 配 置 し ます 。<option> 一 
</option> の 範囲 に は 、 実際 に リス ト ボ ックス に 表示 され る 選択 肢 の テキ スト を 入れ ま 
す 。 ま た 、 value 属性 を 省略 し た 場合 は 、 こ こ に 入れ た テキ スト 自体 が 選択 され た 項目 
と し て 送信 され ます 。option 属性 で 示さ れる 選択 肢 の 数 が size 属性 で 示さ れる 表示 行 
数 より 多い 場合 に は 、 リ スト ボッ クス に 自動 的 に スク ロー ル バ ー が 付け られ ます 。 


< く D> 
あな た の 職業 は 次 の うち どれ に 該当 し ます が か? <br> 
<se1ect size="5" name="oCCupation" mu1tip1e> 
<option> 技術 職 </option> 
<option> 研究 職 </option> 
<option> 営業 ・ 販 売 </option> 
<option> 教師 ・ 講 師 </option> 
<option> プロ グラ マ ・SE</option> 
<option> 学生 </option> 
<option> 主婦 </option> 
<option> その 他 </option> 
</se1ect> 
</p> 
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ファ イル 選択 の 機能 を 付け る 
<input type="fie" mame=" 名 前 " accept="'7M7M タ イプ "> 


MIME タ イプ 受け 付け 可能 な 「.」 区 切り の MIME タ イプ リス ト 


Internet Explorer 6.0 
身 ファ イル 層 択 の 棟 能 を 付け る 





input 要素 の 「type="file"] は 、 フ ォ ー ム の デー タ と し て 送信 する ファ イル を 選択 で きる 
よう な ボタ ン と フィ ー ル ド を 自動 的 に 作成 し ます 。 

accept 属性 に は 、 受 信 プ ログ ラム が 受け 付け る こと の で きる ファ イル の 種類 を MIME 
タイ プ で 指定 し ます 。 複 数 の 種類 を 受信 可能 な 場合 に は 、 そ れ ら を 「.」 で 区 切っ て 指定 
する こと が で きま す 。 

た だ し 、 現 状 で は 、 こ の 属性 は ほとん ど サ ポー ト さ れ て いな いよ う で す 。 


※ こ の 機能 を 利用 する 場合 、form 要素 の method 属性 に は 「post] を 、cnctype 属性 に は 
Imulipar/form-data」 を 指定 する 必要 が あり ます 。 


<form action=" /cgi-bin/snap .Cgi" enctype="mu1tipart/fForm-data" 
method= "Dos 上 "> 骨 

で ロ > 

あな た の 釣果 を 画像 で 送信 し て くだ さい 。<br> 

<1nput type="fFi1er name="imageFi1er acCcept="image/]peg, 1mage/g1f"> 
く /p> 

<D> 

<1nput type="submit" va]ue=" 送 信 "> 

く /p> 

< く / form> 
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<fieldset> 一 </fieldset> を グル ー プ 化 
<legend align=" 位 諸 ">ー</1egend> 符 グ ルー プ の タイ トル 


【 位 置 ル 


に 
品 
に 】 
に 3 


き 
N. 
Em 


ルル 6 
top タイ トル を 上 に 表示 する (デフ ォ ル ト ) 
bottom タイ トル を 下 に 表示 する 
left タイ トル を 左 に 表示 する rwmr 
rlght タイ トル を 右 に 表示 する 
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東都 浴 区 南青山 |-26-1-10F 兵 hg 京都 区 商 香 山 |-26-1-10F 


iso7s 軸 65-2 を 054021 


直上 者 光 南青山 | -26-1-5F 
CO 


03-5678-1234 103-4321-6765 





fieldset 要素 は 、 フ ォ ー ム に 含ま れる 入力 項目 や 選択 項目 を グル ー プ 化し ます 。 
<fieldset> </fieldse> の 範囲 の 先頭 に は legend 要素 を 配置 し て 、 そ の グル ー プ の タイ 
トル を 付け ます 。 align 属性 は 非 推 所 と きれ て いま す が 、 現 在 の と ころ 、 こ れ に 代わ る 
スタ イル シー ト の プロ パテ ィ は 定義 され て いま せん 。 


<Eie1dge> 

<1egend> 個人 情報 </1egend> 

< く D> 

名 前 : <1nput type="text" name="pname"> 

住所 : <1nput type="text" name="paddrs" size="36"> 
く br> 

電話 : <1nput type="tex" name="Dpphone"> 

FAX : <1nput type="text" name="pFax"> 

く /Dp> 

</Eie1dse> 

<Eie1dge> 

<1egendi> 会 社 情報 </1egend> 

<P> 

社名 : <input type="text" name="cname"> 

住所 : <1input type="text" name="caddrs" s1ze="36"> 
<br> 

電話 : <1nput type="text" name="cphone"> 

FAX : <1nput type="text" name="cFax"> 

< く /p> 

</Eie1dse> 
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ラベ ル テ キ スト と 項目 を 一 体 化 させ る 
<labe1 for=" 参 照 7 の ">ー</1abel> 





参照 ID ラベ ル を 付け る 対象 の id 属性 の 値 


Internet Explorer 6.0 191(G 〇 9 
妥 ラベ ル テ キ スト と 項目 を 一休 化 させ る 
アイ ル の お 表示 移動 ⑩ ブッ マー が 


を - ゅ ゆあ の の の omo 


label 要素 は 、 入 力 ・ 選 択 項 目 と その ラベ ル テ キ スト を 明確 に 関連 付け て 一 体 化 さ せる 
た め の 要 素 で す 。 

この 要素 は 、value 属性 に よっ て ラベ ル を 付け る こと の で き な い 項目 (入力 フィ ー ル ド ・ 
メニ ュー・ ラ ジオ ボタ ン ・ チ ェ ッ クボ ックス な ど ) に 対し て 使用 し ます 。 こ れ に よっ 
て 、 た と えば ラジ オ ボ タ ン や チェ ッ ク ボ ックス は 、 ラ ベル と し て 付け られ た テキ スト 
部 分 を クリ ッ ク し て も 反応 し て 切り 替わる よう に な り ま す 。 

ラベ ル の 付け 方 に は 、2 通 り の 方 法 が あり ます 。 ひ と つ は 、<label> ~ </label> の 範囲 
内 に ラベ ル と な る テキ スト と 入力 ・ 選 択 項目 の 両方 を 含め る 方 法 で す 。 も う ひ と つ は 、 
<label> </label> の 範囲 内 に は ラベ ル と な る テキ スト の み を 配置 し て 、 入 力 ・ 選 択 項 
目 の id 属性 で 指定 し た 値 と 同じ も の を for 属 性 で 指定 する 方 法 で す 。 こ の 場合 は 、 ラ ベ 
ル と 入力 ・ 選 択 項目 が 必ず 1 対 1 に な る よう に し て くだ さい 。 現在 の と ころ 、Internet 
Explorer は for 属 性 を 使用 する 方 法 に し か 対応 し て いな いよ う で す 。 


Sonic 時 


く D> 

<1abe1 Eor="nm"> お 名 前 : </1abe1> 

<1nput type="Etext" name="namae" 1d="nm"><br> 

<1abe1 for="em"> メー ル : </1abe1> 

<1nput type="Eext" name="emai1" 1d="em"> 

< く /p> 

<D> 

<1abe1><1npu type="radio" name="sex" value="Male"> 男 性 </1abe1> 
<1abe1><input ype="radio" name="sex" value="Female"> 女性 </1abe1> 
< く /p> 


⑳2 TIPS「 ラ ベル に つい て 」 (P.134) 











<formn action="mailto: メ ー ル ア だ レス " method="post" 
enctype=" MM7ZM 太 タイ プリ >ー</form> 


メー ル ア ド レス フォ ー ム の 送信 先 メ ー ル アド レス 
MIME タ イブ メー ル で 送信 する 際 の MIME タ イブ 


hG で り 【OOW り Firefox 1.0 
二 フォ ー ム の 内 容 が メー ル で 居 く よう に する - Microsoft Interne 
ファ イル 編集 5D 表示 お 気に入り (⑳) ツール D へ ルプ ⑪ 


OR の 回 回 人 る の wm 支 imoo 


静 和 花子 


ル で 届く よう に する 































見 や すい で す 
/-/7O 
HRC 
ゥ キリ と し て いて . やすい で す 。 5382C4281AX8CXA9362 邊 2582 幼 782AZX82C5X6257% 
enctype="texUplain" の 場合 の 受信 例 enctype="application/x-Www-form-urlencoded" ーーーーー 
の 場合 の 受信 例 ーー 生 
9 
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リ と し て いて . 見 や すい で す 。 
ーー7 お 3142190358-- 





で す 。 ! 
7453142b190358--: 





ms の wm mne 


enctype="multiparWform- data" の 場合 の 受信 例 


フォ ー ム の 内 容 は 、 メ ー ル と し て 送信 する こと も で きま す 。 そ の 場合 は 、action 属性 に 
[mailto: メ ー ル アド レス ]」 を 指定 し ます 。 
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enctype 属性 を 指定 し な い 場合 に は 、 デ フォ ルト の 値 と し て MIME タイ プ に 「application/ 
x-www-form-urlencoded が 採用 きれ ます 。 こ の 場合 は 、 送 られ て くる メー ル は その ま 
まで は 内 容 を 読 r こ と が で き な い 状態 に な っ て いま す の で 、 そ れ を 変換 する た め の ソ 
フト ウェ ア が 必要 に な り ま す 。encype 属性 に 「texplain] ま た は 「multiparform-data を 
指定 する と 、 メ ー ラ ー で その まま 読め る 状態 で 送信 させ る こと が で きま す 。 た だ し 、 
交 議 フォ ー ム の デー タ を 受信 する メー ラー の 種類 や その 設定 、 送 信 す る プラ ウザ が フォ ー 
本 放 信 ム の 内 容 を メー ル と し て 送信 する 機能 を 備え て いる か どう か に よっ て は 、 う まく 機 能 
誠 放 介し な い 場合 が あり ます 。 確実 に デー タ を 送信 し て 欲し い の で あれ ば 、 メ ー ル で 送信 す 
る 形式 に は せ ず に CGI を 利用 し て くだ さい 。 

実際 に 試す 場合 に は は 、 サ ンプ ル の 「****@****** ne.jp」 の 部 分 を 、 メ ー ル を 受け 取り 
た い メ ー ル アド レス に 変更 し て か ら 実 行 し て くだ さい 。 


<EOrm acC1On= "ma 1 の キネ ネネ G キ ※ ネ ネネ キ 。n@ 。D" method="post" 
enotype= "ext /p1a1in"> | 
く D> 

<1abe] for="nm"> お 名 前 : </1abe1> 

<1npu type="text" name="namae" 1d="nm"><b エ > 

<1abe1] for="ad"> メー ル : </1abe]> 

<1nput type="text" name="emai1" 1d="ad"> 

く /p> 

く D> 

ご 感想 : <br> 

<textarea name="kansou" rows="4" col1s="40"> 

ここ に ご 感想 を どう ぞ 。 

< く / て textarea> 

く /p> 

ぐ D ロ > 

<input ype="submit" value=" 送 信 "> 

<input type="reset" value=" ク リア "> 

く /p> 

</Form> 





ラベ ル に つい て 

一 般 の アプ リケーション を 使用 し て いる 場合 、 ラ ジオ ボタ ン や チェ ッ ク ボ ックス 
は 、 ボ タン 部 分 で は な く テ キス ト の 部 分 を クリ ッ ク し て も 反応 し ます 。 し か し 、label 
要素 が 登場 する まで は 、Web ペー ジ 上 の ラジ オ ボ タ ン や チェ ッ ク ボ ックス は 、 そ の 
よう に は 動作 し ませ ん で し た 。 つ まり 、 ボ タン 部 分 と テキ スト 部 分 の 関連 を 明確 に 


三 三 
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オ 
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示す 方法 が な か っ た た め 、 そ れ ら が ひと つの も の と し て 認識 され ず 、 ボ タン その も 
の を クリ ッ ク し な けれ ば 反応 し な い 状 態 に な っ て いた の で す 。 

label 要 素 を サポ ー ト し て いる ブラ ウザ は まだ 多い と は いえ ませ ん が 、 こ の 要素 を 
指定 し た か ら と いっ て 未 対応 の ブラ ウザ で 特に 問題 が 発生 する わけ で は あり ませ ん 。 
上 記 の よう な 不 自然 な 動き を を させ な いた め に も 、label 要素 は 常に 指定 する よう に し 
まし ょ う 。 
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フレ ー ム の 全体 構造 を 指定 する 


<frameset rOWS=" 高 さ ">ー</frameset> 
<frameset cols=" 奄 "> 一 </frameset> 








<framme SYC=" び 奄 万 "name=" フ レー ム 名 "> oz 
高 さ 横 に 分 割 する 個数 分 の 高 さ を 上 か ら 順 に 「.」 区 切り で 指定 (ピク セル ・%・? 
幅 縦 に 分 割 する 個数 分 の 幅 を 左 か ら 順 に 「.」 区 切り で 指定 (ピク セル ・9%・? 4.X 
URL フレ ー ム の 内 容 と し て 表示 する HTML 文書 の URL ref 
フレ ー ム 名 リン ク な どの 表示 先 と し て 指定 する 場合 に 利用 する 名 前 Ga 
Internet Explorer 6.0 <a ね 
ファ イル 0 電 員 圧 5-7jac 
G・ 1 | 左 4-mac 
栓 市 | 
19173( い る 
ーー 
の 4 
レ 
の 
フレ ー ム 機能 を 利用 する と 、 ウ ィ ン ド ウ を 縦横 に 区 切っ て 、 そ の 中 に それ ぞ れ 別 の KG 
HTML 文書 を 表示 させ る こと が で きま す 。 介 
ウィ ンド ウ を どの よう に 区 切る か を 指定 する の が frameset 要素 で 、 分 割 さ れ た 各 フ レー る 


ム に 表示 する 内 容 (HTML 文書 ) を 指定 する の が frame 要素 で す 。 フ レー ム を 指定 する 
文書 で は 、 本 来 body 要素 が ある べき 部 分 に 、 代 わり に frameset 要素 を 配置 し ます 。 
body 要素 は 使用 で きま せん の で 、 注 意 し て くだ さい (た だ し 、 後 述 する <noframes> 一 
</noframes> の 中 に は 必要 で す )。 











計 寺 
2 
レ 
I 
ム 
KG 
区 
切 
る 


frameset 要素 の rows 属性 は 横 方 向 に 分 割 す る 場合 の フレ ー ム の 各 高 さき を 上 か ら 順 に 、 
cols 属性 は 縦 方 向 に 分 割 する 場合 の フレ ー ム の 各 幅 を 左 か ら 順 に 、「.」 で 区 切っ て 指定 
し ます 。<frameset> ~ </frameset> の 範囲 に は 、 分 割 さ れる 個数 分 の 内 容 を 順に 入れ る 
必要 が あり ます 。 フ レー ム を それ 以上 分 割 し な た な い の で あれ ば frame 要素 で 読み 込む 
HTML 文書 を 指定 し 、 さ ら に 分 割 す る 場合 に は frameset 要素 を 配置 し て (入れ 子 に し 
て ) その フレ ー ム の 分 割 を 指定 し ます 。 


※ フ レー ム を 定義 する HTML 文書 で は 、<!DOCTYPE> と し て 「Frameset」 を 指定 する こ 
と に 注意 し て くだ さい 。 


基本 的 な 分 割 の 指定 例 


<frameset rowg=" 高 さ A, 高 さ B, 高 さ C"> 
高 さ A ] <frame sro= 内 容 1 .htm1 "> 


<fErame sro= 内 容 2 .htm1 "> 
高 させ B | 内 容 2 <Erame sro= 内 容 3 .htm1 "> 
高 さ C ] 内 容 3 </ Erame8e ヒ > 
幅 A 幅 B 幅 C 


<Erameset co1g=" 幅 A, 幅 B, 幅 C"> 
<Frame sro= 内 容 1 .htm1 "> 
<frame sro= 内 容 2 .htm1 "> 
<Erame sro= 内 容 3 .htm1 "> 

< く / Frame8e ヒ > 


内 容 1 | 内 容 2| 内 容 3 


<frameset rows=" 高 さ A, 高 さ B" co1g=" 幅 C, 幅 D"> 
<Frame sro= 内 容 1 .htm1 "> 
<fErame sro= 内 容 2 .htm1 "> 
<frame sro= 内 容 3 .htm1 "> 
<Frame sro= 内 容 4 .htm1 "> 





</ Framese キ > 
1 <frameset rows=" 高 さ A, 高 さ B"> 
高 さ A ] 内 容 1 <frame sro= 内 容 1 .htm1 "> 
1 <Erameset co1g=" 幅 C, 幅 D"> 


<Frame sro= 内 容 2 .htm1 "> 
高 さ B | | 内 容 2| 内 容 3 <Frame sro= 内 容 3 .htm1 "> 
4 < く / Framege> 

ya </ Erameset> 


幅 C 幅 D 
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<!DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTML 4.01 9 
"hp : / /Www .w3 . org/TR/htm14/Frameset .dtd"> 

<htm] 1ang="]a"> 

<head> 

<meta htEp-equ1v="Content-Type" 1 
charset=ShifFt_ JTS"> 

<tit1e> フレ ー ム の 全体 構成 サン ブル </tit1e> 

</head> 
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<E ェ ameget rows="70,* リ > ん ルル 6 
<Frame 8rC=" 上 ュ 11e.htm1" name="1ogo"> OperaZ 
<Eramese co1s="150,*"> 

Opera6 


<E ェ ame SrC="menu.htm1" name="menu"> 
<Erame SrC="content .htm1" name="content"> Sa ね 
</Erame8e セ > 左 5-ax 
<noframe8> /E4-mac 
<body> 
) 
</body> 
</noframeS> 
</Erame8e セ > 
</htm1> 


apemmwdorommcserorreeoWePtO uo 
<noframes> : 「 フ レー ム 」 の 「 フ レー 際 な い 環 境 用 の 内 容 入れ る 」(P143 ほり 9 








「『」 に よる 幅 や 高 さ の 割合 の 指定 

frameset 要 素 の rows 属性 と cols 属性 や 、col 要素 と colgroup 要素 の width 属 
性 で 長 さ ( 幅 ・ 高 さ ) を 複数 指定 する 場合 、 ピ クセ ル や % だ け で な く 、 比 率 を 指定 す 
る こと も で きま す 。 そ の 場合 に 使用 する の が [記号 で 、「*] の 前 に 整数 を 付け て 表 
し ます 。 こ の 場合 、 ま ず ピ クセ ル や % で 指定 され て いる 長 さ が あれ ば その 長 さ が 確 
保 さ れ 、 残 り の 部 分 が 指定 され た 比率 で 分 配 さ れる こと に な り ま す 。 た と えば 、 
「40.1*.2*.3*」 と 指定 され た 場合 は 、40 ビク セル を 除い た 残り の 長 さ を 「1:2:3] 
の 割合 で 分 割 し ます 。 

な お 、 単 に 「*] だ けが 指定 され た 場合 は 、「1*] と 同じ 意味 に な り ま す 。 
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フレ ー ム の 表示 方 法 を 設定 する 


<frame Scrolling=" スク ロー ル の 区 件 " ores7ze> 
<frame marginwidth=" 左 右 の マー ジン " marginheight=" 上 下 の 


マー ジン "> 


noresiZe フレ ー ム の サイ ズ 変 更 を 禁止 
左右 の マー ジン フレ ー ム 内 の 左右 の マー ジン (ピク セル ) 
上 ド の マー ジン フレ ー ム 内 の 上 下 の マ ー ジ ン (ピク セル ) 


【 ス クロ ー ル の 制御 】 


auto 必要 に 応じ て スク ロー ル 可 能 (デフ ォ ル ト ) 
Yes 淀 に スク ロー ル 可 能 (スク ロー ル バ ー を 表示 ) 
no 常に スク ロー ル 不 可 (スク ロー ル バ ー を 非 表 示 ) 


Internet Explorer 6.0 
到 フレ ー ム の サン ブル - Mcrosoft Imternet Explorer 
プア イル 奏 集 ) 表示 ⑰ 


@ 呈 の 回 還 人 の の ws 誠 5moo 





content html 
この フレ ー ム は 、 左右 の マー ジン が 
80 ビ クセ ル に 、 上 下 の マ ー ジ ン が 40 
ビク セル に 設定 され て いま す 。 


1913 (いる 


ッ ー ル ⑪D へ ML プ ⑪ 





content ht ml 
この フレ ー ム は 、 左右 の マー ジン が 80 


ピク セル に 、 上 下 の マ ー ジ ン が 40 ピ ク 
ゼル に 設定 され て いま す 。 








scrolling 属性 は 、 そ の フレ ー ム の 内 容 を 表示 する 場合 に スク ロー ル が で きる よう に す 
る か どう か を 設定 を し ます 。 

noresize 属性 は 、 各 フレ ー ム を 区 切る 境界 の 枠 を マウ ス で 移動 で まき ない よう に し て 、 フ 
レー ム の 表示 領域 を 固定 し ます 。marginwidth 属性 と marginheight 属性 は 、 そ の フレ ー 
ム 内 で の マー ジン を 設定 し ます 。 





ーー 


< く !DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTML 4.01 RE 
"httD : / /Www .W3 . org/TR/htm14/fFrameset . Qtd"> 
<htm] 1ang="]a"> 
<head> 
<meta http-equ1v="ConEtent-Type" ecok の 
charset=Sh1ft JTS"> 
<tit1e> フレ ー ム の サン ブル </tit1e> 
</head> 
<frameset rows="70,*"> 
<Erame Sro=" 上 it]e.htm]" scro11ing="no" nores1ze> 
<frameset col]s="150,*"> 
<Erame Src="menu .htm1" marginwidth="0" marginheight="0"> 
<Erame Src="ConEent .htm] " marginwidth="80" marginheight="40"> 
< く / Frameset> 
<noframeSs> 
<body> 
) 
</body> 
< く /noframeS> 
</ Frameset> 
</htm1> 
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フレ ー ム を 区 切る 枠 の 表示 ・ 非 表示 を 設定 する 
<frame frameborder=" 徐 の 表示 導 定 "> 
1 


表示 (デフォルト) 
0 非 表 示 





Internet Explorer 6.0 
E 2 の バリ ルル ジル / 
アア イル) 編集 


GR の 回 回 全 


Firefox 1.0 
フル レーム の サン ブル - Mozilla Firefox 
アイ ル (F) 編集 表示 移動 ⑬⑧ ブッ 2v-2B) ウー ル ⑪ へ 総 


を ゥ ゅ 996 の omw | 


frameborder 属性 は 、 そ の フレ ー ム と 隣接 する フレ ー ム と を 区 切る 枠 を 表示 する か どう 
か を 設定 し ます 。 

ここ で いう 枠 と は 、 一 般 的 に 立体 的 に 表示 され る 枠 の こと で 、 こ れ を 非 表 示 に し て も 
フレ ー ム と フレ ー ム の 間 の (平面 的 な ) 空間 は 残っ た まま に な り ま す 。 一 方 の フレ ー ム 
の 枠 が 非 表 示 に 設定 され て いて も 、 隣 接する 他方 の フレ ー ム の 枠 が 表示 され る よう に 
設定 され て いる 場合 に は 、 そ の 間 の 枠 は 表示 され ます の で 、 注 意 し て くだ さい 。 

一 般 的 な プラ ウザ で は 、 こ の 属性 を frameset 要素 に も 指定 で きま す が 、HTML4.01 の 
仕様 で は frame 要素 に 対し て の み 指 定 で きる こと に な っ て いま す 。 





EE 間 LT 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Framese//EN" 


"http : / /www .W3 . org/TR/htm14/fFrameset .Qtd"> 


<htm] 1ang="]a"> 
<head> 


<meta htp-equ1v="Content-Type" content="text/htm] : 


charse=ShifFt JTS"> 

<tit1e> フレ ー ム の サン ブル </t1it1e> 

</head> 

<fFrameset rows="70,* リ > 
<fFrame Src=" 上 it1e .htm1 "> 
<fEramese co1s="150,*"> 


<Erame SrC="menu.htm1" Eramejborder="0"> 


<frame Sro="conEent .htm1" 
</ Eramese> 
<noframeS> 
<body> 
) 
</body> 
</noframe8> 
</ frameset> 
</htm1> 
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frame 要素 の frameborder 属性 を 使用 する と 、 フ レー ム を 区 切る 枠 を 非 表 示 に 設定 する 
こと は で きま す が 、 フ レー ム と フレ ー ム の 間 の 枠 が 平面 的 に な る だ け で 空間 は 残っ て 
し まい ます 。 そ れ ら も 含め た 枠 を 完全 に 消す た め に は 、frameset 要素 に frameborder 属 
性 を 指定 し た 上 で 、 さ ら に Internet Explorer の 独自 拡張 で ある framespacing 属性 と 、 
Netscape Navigator の 独自 拡張 で ある border 属性 を 指定 する 必要 が あり ます 。 

これ ら の 独自 拡張 を 利用 する と 、 そ の HTML 文書 は 標準 的 な 仕様 に 治っ た も の で は な 
く な り 、 し か も 多く の プラ ウザ で フレ ー ム の サイ ズ が 変更 で き な く な る な どの 弥 害 も 
出 て きま す の で 、 注 意 し て くだ さい 。 


<htm1 ]ang="]a"> 
<head> 
<meta http-equ1v="Content-Type" conEent="Eex 上 /htm1 : 
charset=ShifFt JTS"> 
<tit1e> フレ ー ム の サン プル </tit1e> 
</head> 
<Erameset rows="70,*" Erameborder="0" Framespacing="0" border="0"> 
<fFrame Src=" 上 it]e.htm1 "> 
<fFrameset cols="150,* リ > 
<frame Src="menu .htm1 "> 
<Frame Src="ConEent .htm1l "> 
</ Frameset> 
<noframes> 
<Dbody> 
) 
</body> 
</nofFrameS> 
< く / ErameSe セ ヒ > 
</htm1l> 
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フレ ー ム が 表示 され な い 環 境 








用 の 内 容 を 入れ る 
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ブル - Opera 5 暫 了 





フル ー ム が 表示 と れ な の 環境 用 の 内 容 サン 
アイ ル (E) 編集 EC) 表示) 移動 (NO ブッ クマ ー が B) メー ル ⑳) チェ | 理科 
ぃ ・ ぞ ・・ ウ ・ 多 AA で 柏 主 回 


ホー ムペ ー ジ の 作り 方 


* Style Sheet 
* JavaScnpt 










Internet Explorer 6.0 
良 フレ ー ム が 表示 され ん 


noframes 要素 は 、 フ レー ム を サポ ー ト し て いな い ブ ラウ ザ を 使っ て いる 場合 や フレ ー 
ム 機 能 を オフ に し て いる 場合 な ど 、 フ レー ム が 表現 で き な い 環境 で 表示 させ る 内 容 を 
指定 し ます 。 

この 要素 は 、<frameset> ~ </frameset> の 範囲 の 最初 また は 最後 に ひと つ だ け 配 置 し て 
くだ さい 。<noframes> 一 </noframes> の 中 に は 、 ま ず body 要素 を 配置 し て 、 そ の 中 に 
表示 きせ た い 内 容 を 記述 し ます 。 内 容 と し て は 、「 フ レー ム に 対応 し た プラ ウザ で ご 覧 
くだ さい 」 と いう よう な も の で は な く 、 フ レー ム 版 の 代わ り と な る 内 容 そ の も の や 、 各 
ペー ジ の 説明 と その リン ク な ど を 入れ る よう に し て くだ さい 。 


ED 所 還 


<!DOCTYPE_ HTML PUBLTC "-//W3C//DTD HTML 4.01 Frameset//EN" 陸 
"http : / /www .w3 . org/TR/htm14/Frameset .Qtd"> 
<htm] ]1ang="]a"> 





<head> 

<meta http-equ1="Content-Type" content="text/htm] : 骨 
charset=ShifFt_ JTS"> 

<tit1e> フレ ー ム が 表示 され な い 環境 用 の 内 容 サ ンプ ル </tit1e> 

</head> 

<frameset rows="70,* リ "> 














<fFrame sro="it1e.htm1" name="1ogo"> 
<frameset co]s="150,*"> 
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和泊 図 4 ト ドー で 人 





<frame Src="menu .htm1" name="menu"> 
<fFrame Sro="content .htm1" name="conten モ "> 


</ Frameset> 
<noframeg> 
<body> 
太 re7ox <h1> ホー ムペ ー ジ の 作り 方 </h1> 
Moz//a <u1> 


<11><a href="ht .htm1 ">HTML.</a></ ユ > 
ザワ <11><a href="ss.htm1 ">Sty1e Sheet</a></11> 
ーーー <11><a hrefF="]s .htm1 ">JavaScr1p</a></]1> 
8 < く /u]> 
</body> 
Opera6 </noframeg> 
</ frameset> 


5a7a// </htm1> 
話 5-ia 
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テキ スト ブラ ウザ や 音声 ブラ ウザ な ど に 対す る 配慮 

テキ スト ブラ ウザ や 音声 ブラ ウザ な どの 中 に も 、 フ レー ム を 取り 扱う こと が で き 
る も の が あり ます 。 そ の 場合 、HTML の 内 容 か ら 独自 に 情報 を 抜き 出し て フレ ー ム 
の 構成 を リン ク と し て 示し 、 そ こ か ら 各 フレ ー ム を 個別 に 参照 で きる よう に な っ て 
いる も の が 多い よう で す 。 

と ころ が 、 リ ンク で 各 フ レー ム を 示す 場合 に 、 何 を 利用 し て 示す か が ブラ ウザ ご 


と に 異な っ て お り 、frame 要素 の name 属性 また は title 属性 の 値 を リン ク と し て 使 
用 する も の も あれ ば 、frame 要素 で 指定 され て いる 文書 の title 要素 の 内 容 を リン ク 
と し て 使用 する も の も あり ます 。 

WAI (Web Accessibility Intaractive) の アク セ シ ビ リティ ・ ガ イド ライ ン で は 、 
frame 要素 の title 属性 を 使用 し て フレ ー ム の タイ トル を 付け る こと が 推奨 され て い 
ます 。 し か し 、 現 状 で は 、 各 frame 要素 の name 属性 と title 属性 、 各 フレ ー ム の 
内 容 と な る 文書 の title 要素 の 3 種類 に 対し て 、 そ の フレ ー ム の 役割 が わか る よう な 
適切 な も の を 指定 し て お く 必 要 が ある よう で す 。 
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北 の 釣 魚 図鑑 北 の 釣魚 図鑑 


この ペー ジ で は 、 北海 道 で 釣る こと の で きる 魚 を 紹介 し て い 
ます . 左 の フレ ー ム の 中 か ら 好 き な 魚 の 名 前 を クリ ッ ク す る す 。 ム 、 
と 写真 と 解説 が 表示 され ます 。 ヵ 示さ れ ま す 。 Opey み 6 
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ソイ は 夏 枯れ と 呼ば れる 時 期 も 含め て 春 か ら 秋 に か け て (場所 
に よっ 的 間 単 に め 、 北海 道 の ソ 
ルト ウ フ 
と ク ソ 言え る 小樽 ・ 札 幌 近郊 の 釣り 場 で は イム ( 尋 方 
(地方 名 : ハ チ ガラ )・ キ ツネ メリ パル ・ タ ヌキ メバル シマ ソイ な 名: ハチ ガラ ) ・ キ ソネ メバル ・ タ ヌキ メバル ・ シ ャ ソイ な ど を 釣る 
ど を 釣る こと が で きる 。 こよ が で きる 。 























フレ ー ム 内 の 文書 で 指定 され て いる リン ク は 、 そ の まま だ と リン ク 先 を 同じ フレ ー ム 
内 に 表示 し ます 。 こ れ を 他 の フレ ー ム に 表示 さき せる よう に し た い 場 合 に は 、 表 示さ せ 
た い フ レー ム (frame 要素 ) の name 属性 で 指定 し て ある フレ ー ム の 名 前 を 、target 属 性 の 
値 と し て その まま 指定 し ます 。 

また 、 フ レー ム 名 に は 「_topl」 の よう に 「_」 で 始ま る 4 つの 特別 な 名 前 が あり ます 。 こ れ 
に つい て は 、TTIPS 「target 属 性 の 特別 な 4 つの 値 ](P.62) を 参照 し て くだ さい 。 


ET 組 二 議 


【 フ レー ム を 定義 し て いる 文書 】 

< く !DOCTYPE HTMTL, PUBLTC "-//W3C//DTD HTML 4.01 1 
"hp : / /Www .w3 . org/TR/htm14/frameset .dtd"> 

<htm] 1ang="]a"> 

<head> 
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<meta htEtp-equ1v="Content-Type" RS 
charset=Sh1ft JTS"> 

<tit1e> 北 の 釣 條 図鑑 </ 上 1t1e> 

</head> 

<frameset rows="70,* リ > 














<Frame src=" 上 11e.htm1" name="]1ogo" scro11inqg="no"> 
<fFrameset cols="150,*"> 
<fFrame Sro="menu .htm1" name="menu"> 
<fFrame src="Content .htm1" name="content"> 
</ Framese> 
<noframeS> 
<body> 
) 
</body> 
</noframeS8> 
</ Framese> 
</htm1> 


【 左 側 の フレ ー ム の 文書 (menu.html) 】 

<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 | 
"http: / /www .W3 .org/TR/htm14/1oose .dtd"> 

<htm] 1ang="]a"> 

<head> 

<meta http-equiv="Content-Type" 人 
charset=Shift_ TS"> 

<tit1e> 北 の 釣 急 メ ニュ ー</t1it1e> 

</head> 

<body> 

< く Uu]> 

<11><a href="gol.htm1" target="content"> ソイ </a></11> 

<11><a hrefs"atname.htm1" target="content"> アイ ナメ </a></11> 

<11><a hreF="jka]ifka.htm1" target="content"> カジ </a></11> 

<11><a href="hokke .htm1" target="ocontent"> ホッ ケ </a></]1> 

<11><a href="jikare1 .htm1" target="oontent"> カレ イ </a></] ュ > 

<11><a href="hirame.htm1" target="content"> ヒラ メ </a></]1> 

<11><a hreF="gajke.htm1" target="content"> サケ </a></]1> 

<11><a href="masu.htm1" target="content"> マス </a></11> 

<1i><a hreF="jkomai .htm1" target="Content"> コマ イ </a></ ユ 1> 

<11i><a href="haze.htm1" target="content"> ハゼ </a></] ュ > 

<11i><a hreF="ugut .htm1" target="content"> ウグイ </a></11> 

<11i><a href="ijka.htm1" target="content"> イ </a></]1> 

く /u1> 

</body> 

< く /html > 





hh 
MEN 
いい 4 【ー】 


イン ライ ン フ レー ム を 配置 する 


<iframe SrYC=" 内 容 の び 刀 " name=" フレ ー ム 名 ">ー</iframe> 


【 そ の 他 に 指定 可能 な 属性 】 


width 

height 
marginwidth 
marginheight 
Scralling 
frameborder 
align 


ii ゆり 【 り rd WI 
圭 イ ン ライ ン フル ー ム - サ ン ブ ル 


フレ ー ム の 幅 (ピク セル -⑳) 

フレ ー ム の 高 さ (ピク セル ・%⑳) 

フレ ー ム 内 の 左右 の マー ジン (ピク セル ) 

フレ ー ム 内 の 上 下 の マ ー ジ ン ( ピ クセ ル ) 
スク ロー ル (auto : 自 動 プ yes : あ り no : な し ) 
フレ ー ム 枠 の 表示 ・ 非 表示 (1 : 表 示 0 : 非 表示 ) 
配置 位置 (left ・right ・top ・middle・bottom) 


191③ い る 


Internet Explorer イン ライ ン フ レー ム ・ サ ン ブ ル - Mozilla Firefox 





ライ ッ フ ルーム ・ サ ン ブ ル - Micru ゅ 


ザ で 利用 可能 な 


ッ フ 声 入 
ます 。 ハー ドウ ェ ア に よる 支援 技術 と し て | 


が あり ます 。 ハー ドウ ェ ア に よる 支援 技 
代替 キー: や 様々 な 種類 の ポイ ン テ ィ ン グ デ バイ ス 


な ど が あり ます 。 





し ジア /) TI 
ファイル 罰 集 ) 表示 移動 ブックマーク 8) ツー ル ①D ヘルプ) < 侍 


年 - ゆ - 氏 G@ の ome 加 
支援 技術 


Web ア ク ゼ シビ リティ の 範囲 
に 


ッ プ の ブラ ウザ で 利用 可能 
な 音声 入力 ソフ トウ ェ ア な か * 


様々 な 種類 の ポイ ン テ ィ ン グ デ パイ ス な ね ど が あり ます 。 


iframe 要素 は 、 ウ ィ ン 





ドウ を 分 割 す る 形式 の フレ ー ム で は な く 、 ウ ィ ン ド ウ の 中 に 独 





立 し て 表示 され る イン ライ ン フ レー ム を 配置 し ます 。 フ レー ム 内 に は 、src 属 性 で 指定 
され た 内 容 が 表示 され ます 。 

<iframe> 一 </iframe> の 間 に は 、 こ の フレ ー ム を サポ ー ト し て いな い ブ ラウ ザ や 、 フ 
レー ム を 表示 し な いよ うに 設定 し て いる 場合 に 表示 させ た い 内 容 を 指定 し て お きま す 。 
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この フレ ー ム は frameset 要素 で 定義 され る フレ ー ム と は 異な り 、<!DOCTYPE> が 
「Transitional」 の 場合 で も 使用 する こと が で きま す 。 aliign 属性 で left また は right を 指定 
する と 、 イ ン ラ イン フレ ー ム が 左 また は 右 に 配置 され て テキ スト が 回 り 込 むように な 
(ます 。 


|Samplp 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / / EN" か | 
"http : / /www .w3 . org/TR/htm14/1oose .dtd"> 

<htm] 1ang="]a"> 

<head> 

<meta http-equ1iv="ConEtent-Type" content="Etext/htm] : 和 
charset=Shift JTS"> 

<tit1e> イン ライ ン フ レー ム ・ サ ンプ ル </tit1e> 

</head> 

<body> 

<h1> 支援 技術 </h1> 

<Dp> 

<1Erame gro="jkaisetgsu.htm1" name="term" w1dth="250" height="120" | 
a11gn= "right"> 

… イ ン ラ イン フレ ー ム が 表示 され な い 環 境 用 の 内 容 … 

</Erame> 

Web ア クセ シビ ピリ ティ の 範囲 で 利用 され る ソフ トウ ェ ア に よる 支援 技術 と 

し て は 、<a href="sr.htm1" target="term"> ス クリ ー ン リー ダー </a> や 

<a href="sm.htm1" target="term"> 画面 拡大 ソフ トウ ェ ア </a> 、<a href 

="ss.htm1" target="term"> スピ ー チ シン セ サ イ ザ </a> 、 グラ フィ カル な 

デス クト ッ プ の ブラ ウザ で 利用 可能 な <a href="vi .htm1" target="term"> 

音声 人 力 ソ フト ウェ ア </a> な ど が あり ます 。 ハ ー ド ウェ ア に よる 支援 技術 

と し て は 、<a href="ak.htm1" target="term"> 代替 キー ボー ド </a> や や 様々 

な 種類 の <a hrefF="pd.htm1" target="term"> ポイ ン テ ィ ン グ デ バイ ス </a> 

な ど が あり ます 。 

<br clear="r1ight"> 

く /p> 

</body> 

</htm1> 





<SCript type= "7 タイ プリ >ー</script> 
<script type=" 7 タイ プ " 1anguage=" 言語 名 " src=" び "> 
ー</ Script> 





MIME タイ プ スク リプ ト 言 語 の MIME タ イプ ( 例 : text/javascript) W6.X 
言語 名 スク リプ ト 言 語 の 名 前 ( 例 : JavaScript1.2) 
URL スク リプ ト を 記述 し た 別 フ ァイル の URL 

script 要 素 は 、HTML 文書 内 に スク リプ ト を 記述 する 場合 に 使用 し 、 ス クリ プ ト 言 語 は 本 蘭 剛 


この 要素 の 範囲 山 に 記述 し ます 。 

この 時 、 こ の 要素 に 未 対応 の プラ ウザ が スク リプ ト 部 分 を 画面 に 表示 し て し まう こと 
を 避け る た め に 、 通 常 は スク リプ ト 全 体 を HTML で の コメ ント に し て お きま す ( コ メン 
ト の 終了 部 分 が 、HTML の 場合 と は 多少 異な る こと に 注意 し て くだ さい )。 こ の 要素 は 、 
<head> 一 </head> と <body> 一 </body> の 範囲 内 の 任意 の 位置 に 置く こと が で きま す 。 
type 属性 は HTML4.0 か ら 採用 され た 属性 で 、 仕 様 上 は 必ず 指定 する こと に な っ て いま 
す 。 language 属性 は 古く か ら 利用 きれ て いる 属性 で 、 バ ー ジ ョ ン に 依存 し た スク リプ 
ト を 使用 し た い 場 合 な ど に 利用 され て いま す が 、HTML4.0 で は 非 推 拉 属 性 と きれ て い 
ます 。 src 属性 は 、 ス クリ プ ト を 別 フ ァイル に 記述 し て お いて 、 そ れ を 呼び 出し て 使い 
た いり 場合 に 使用 し ます 。 


EETIE 揚 史 ___ 


<8Cript 上 ype="Eext/]ava8gcript 上 "> 





ぐ ! ニー 
if (se1fF != top) 
top.1ocation.href = se1f.]ocation .href : 
7 ニー タテ 
</ BCript> 





\⑳ <meta http-equiv="…" content='"ー"> :「 文 書 情報 ] の 「 ス タイ ル シ ー ト や スク リブ ト の 言語 を 示す 」 
(P21) 
JavaScript : 「JavaScript に つい て 」 の 「JavaScript の 記述 法 (<script> の 使い 方 )] (P.299) 
JavaScript : 「JavaScript に つい て 」 の 「JavaScript の 記述 法 (JavaScript の 外部 呼び 込み 方 法 )」 
(P.308) 
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スク リプ ト が 実行 され な い 環 境 用 の 


内 容 を 入れ る 





noscript 要素 は 、 ス クリ プ ト が 実行 で き な い 場合 に 、 代 わり に 表示 させ る 内 容 を 指定 し 
ます 。 

し た が っ て 、 ス クリ プ ト が 実行 可能 な 場合 に は 、 こ こ に 記入 し た 内 容 は 表示 され ませ 
ん 。 こ の 要素 は 、<body> - <body> の 範囲 内 に 配置 する よう に し て くだ さい 。 ま た 、 
この 要素 の 内 容 と し て は 、「 ス クリ プ ト 対 応 の プラ ウザ で 見 て くだ さい 」 と いう も の で 
は な く 、 ス クリ プ ト が 利用 で きる 場合 と 同じ よう な 意味 を 持つ 内 容 ( ま た は 、 そ の よう 
な ペー ジ へ の リン ク ) を 入れ る よう に し て くだ さい 。 


EETTTE 揚 ______ー-- 


< く nOBCr1p セ > 

<D> 

スク リプ ト が 利用 で き な い 環境 の 方 は 、 

<a href="acs .htm1 "> アク セ シ ブ ル 版 </a> 
を ご 利用 くだ さい 。 

< く /p> 

< く /nOBCr1p セ > 








1 HTML4.01 全 要 素 ・ 属 性 一 臣 も 








E! 、。 リン ク (アン カー) Strict 
href リン ク 先 URL Strict 55.※ 1 
charset リン ク 先 の 文字 コー ド Strict 
hreflang リン ク 先 の 言語 コー ド Strict 
type リン ク 先 の MIME タ イプ Strict 
name 名 前 Strict 56.58 
rel この 文書 か ら 見 た 関係 Strict 
rev リン ク 先 か ら 見 た 関係 Strict 
shape イメ ー ジ マッ プ の 領域 の 形状 Strict 
Goords イメ ー ジ マッ プ の 領域 の 座標 Strict 
tabindex Tab 移動 順 Strict 
CCeSSkey ショ ー ト カッ トキ ー Strict 
target 表示 先 の フレ ー ム ・ ウ ィ ン ド ウ 名 Transitional 61.145 
class クラ ス 名 Strict 
id ID 名 Strict 
title 補足 情報 Strict 
style スタ イル シー ト Strict 
lang 言語 コー ド Strict 
dir 文字 表記 の 方 向 Strict 
abbr 略語 Strict 
class クラ ス 名 Strict 
id ID 名 Strict 
title 省略 し て いな い 元 の 言葉 Strict 35 
style スタ イル シー ト Strict 
lang 言語 コー ド Strict 
dir 文字 表記 の 方 向 Strict 
acronym 頭字 語 Strict 
class クラ ス 名 Strict 
id ID 名 Strict 
title 省略 し て いな い 元 の 言葉 Strict 35 
style スタ イル シー ト Strict 
lang 言語 コー ド Strict 
dr 文字 表記 の 方 向 Strict 2 
gddress 連絡 先 Strict 30 ア 
class クラ ス 名 Strict レ 
id ID 名 Strict ス 
title 補足 情報 Striot 
style スタ イル シー ト Strict 
lang 言語 コー ド Strict 
dir 文字 表記 の 方 向 Strict 


※ 1 : 56.58.63.145 
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Code 
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archive 
alt 
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JAVA ア プレ ッ ト 
幅 

高 さ 

クラ ス フ ァ イル 名 
シリ アラ イズ され た デー タ 名 
基準 UHL 

JAVA ア ー カ イブ ファ イル の UHL 
代替 テキ スト 

名 前 

テキ スト と の 位置 関係 
左右 の 空間 

上 下 の 空 間 

クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 

イメ ー ジ マッ プ の 領域 指定 
代替 テキ スト 

領域 の 形状 

領域 の 座標 

リン ク 先 の URL 

リン ク が 無い こと を 示す 
Tab 移動 順 

ショ ー ト カッ トキ ー 
表示 先 の フレ ー ム ・ ウ ィ ン ド ウ 名 
クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 

言語 コー ド 

文字 表記 の 方 向 

太字 

クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 

言語 コー ド 

文字 表記 の 方 向 

基準 URL 

基準 URL 

表示 先 の フレ ー ム ・ ウ ィ ン ド ウ 名 











Transitional 必須 112 
Transitional 必須 118 
Transitional 118 
Transitional 

Transitional 

Transitional 

Transitional 

Transitional 

Transitional 非 推奨 

Transitional 非 推奨 

Transitional 非 推奨 

Transitional 

Transitional 

Transitional 

Transitional 

Strict 

Strict 必須 103 
Strict 103 
Strict 
Strict 103 
Strict 

Strict 

Strict 

Transitional 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 44 
Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 24 
Transitional 24 
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big 


class 
id 
title 
style 
lang 
dir 


blockquote 


br 


cite 
class 
id 
title 
Style 
lang 
dir 


text 
link 
vlink 
alink 
bgcolor 
background 
class 
id 

title 
style 
lang 

dir 


Clear 
class 
id 


、 基準 フォ ント ・ 色 ・ サ イズ 


フォ ント 名 

色 

フォ ント サイ ズ 
ID 名 
文字 表記 の 方 向 
クラ ス 名 

ID 名 

補 定 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
大 き な 文 字 
クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
ブロ ッ ク レ ベル の 引用 文 
出典 URL 

クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
文書 本 体 
文字 色 

未 キ ャ ッシュ の リン ク 部 分 の 色 
キャ ッシュ 済み の リン ク 部 分 の 色 
リン ク 部 分 を 選択 し た 時 の 色 
背景 色 

背景 画像 の URL 
クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
履行 

回 り 込み の 解除 
クラ ス 名 

ID 名 


Transitional 非 推 
Transitional 非 推奨 
Transitional 非 推奨 
Transitional 非 推奨 
Transitional 
Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 
Transitional 非 推奨 
Transitional 非 推奨 
Transitional 非 推 奨 
Transitional 非 推奨 
Transitional 非 推奨 
Transitional 非 推奨 
Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 
Transitional 非 推奨 
Strict 

Strict 
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title 補足 情報 





style スタ イル シー ト Strict 
RI 
name 名 前 Strict 119 
type 形式 Strict 119 
Value 値 Strict 119 
disabled 選択 ・ 変 更 不可 Strict 
tabindex Tab 移動 順 Strict 
accesSkey ショ ー ト カッ トキ ー Strict 
class クラ ス 名 Strict 
id ID 名 Strict 
title 補足 情報 Strict 
style スタ イル シー ト Strict 
lang 言語 コー ド Strict 
dir 文字 表記 の 方 向 Strict 
align * 表示 位置 Transitional 非 推奨 78 
class クラ ス 名 Strict 
id ID 名 Strict 
title 補足 情 報 Strict 
Style スタ イル シー ト Strict 
lang 言語 コー ド Strict 
dir 文字 表記 の 方 向 Strict 
enter 。 中 え 。 Transhional 大 推 長 47 
class クラ ス 名 Transitional 
id ID 名 Transitional 
title 補 定 情報 Transitional 
style スタ イル シー ト Transitional 
lang 言語 コー ド Transitional 
dir 文字 表記 の 方 向 Transitional 
EEE 
Class クラ ス 名 Strict 
id ID 名 Strict 
title 補足 情報 Strict 
リ style スタ イル シー ト Strict 
較 lang 言語 コー ド Strict 
ア dir 文字 表記 の 方 向 Strict 
2 eS N 
レ : class クラ ス 名 Strict 
id ID 名 Strict 
title 補足 情報 Strict 
Style スタ イル シー ト Strict 
lang 言語 コー ド Strict 
dir 文字 表記 の 方 向 Strict 
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Strict 















Span 
width 
align 
valign 
char 
charoff 
class 
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title 
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COIgrOuD 


dd 


del 


Span 
width 
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Class 
id 
title 
style 
lang 
dir 


cite 
datetime 
class 

id 

title 
style 
lang 

dir 


対象 と する 縦列 数 
縦列 の 幅 

行 揃え 

錠 方 向 の 位置 揃え 
位置 を 揃え る 文字 
位置 を 揃え る 文字 まで の 距離 
クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 

文字 表記 の 方 向 
表 の 縦列 の グル ー プ 化 
グル ー プ 化す る 縦列 数 
縦列 の 幅 

行 揃え 

縦 方 向 の 位置 揃え 
位置 を 揃え る 文字 
位置 を 揃え る 文字 まで の 距離 
クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 

文字 表記 の 方 向 
dl 要素 の 説明 部 分 
クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 

文字 表記 の 方 向 
削除 部 分 

削除 理由 の URL 
更新 日 時 

クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 

文字 表記 の 方 向 


Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 





98 
9 ら 8 
78 
78 


90 
90 
78 
79 


37 
37 




















9 
Pd 
レ 
に 
ス 


class クラ ス 名 

id ID 名 

title 補足 情報 
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lang 言語 コー ド 
dir 文字 表記 の 方 向 
フォ ー ム の 内 容 の グル ー プ 化 
class クラ ス 名 
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title 補足 情報 
style スタ イル シー ト 
lang 言語 コー ド 
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Size フォ ント サイ ズ 
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lang 言語 コー ド 
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marginheight フレ ー ム 内 の 上 下 の マ ー ジ ン 
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EN 
align 行 揃え Transitional 非 推奨 48 
class クラ ス 名 Strict 
id ID 名 Strict 
title 補 定 情報 Strict 
Style スタ イル シー ト Strict 
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lang 言語 コー ド Strict 
dir 文字 表記 の 方 向 Strict 
も 
version HTML の バー ジョ ン Transitional 非 推奨 
lang 言語 コー ド Strict 26 
dir 文字 表記 の 方 向 Strict 
題 較 人 NN NHN 0 本 半 用 Mi 
クラ ス 名 Strict 
id ID 名 Strict 
title 補足 情報 Strict 
style スタ イル シー ト Strict 
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言語 コー ド 
文字 表記 の 方 向 
検索 用 入力 フィ ー ル ド 
入力 フィ ー ル ド の ラベ ル 
クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
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番号 
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補足 情報 

スタ イル シー ト 
言語 コー ド 

文字 表記 の 方 向 

関連 ファ イル 
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関連 文書 か ら 見 た 関係 
関連 文書 の URL 

関連 文書 の 言語 コー ド 
関連 文書 の 文字 コー ド 
関連 文書 の MIME タイ プ 
関連 文書 の メデ ィ ア タイ ブ 
表示 先 の フレ ー ム ・ ウ ィ ン ド ウ 名 
クラ ス 名 
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言語 コー ド 
文字 表記 の 方 向 

イメ ー ジ マッ プ の 定義 
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クラ ス 名 
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class クラ ス 名 Transitional 
id ID 名 Transitional 
title 補足 情報 Transitional 
style スタ イル シー ト Transitional 
lang 言語 コー ド Transitional 
dir 文字 表記 の 方 向 Transitional 
content メタ デー タ の プロ パテ ィ の 値 Strict 
name メタ デー タ の プロ バテ ィ 名 Strict 
http-equiv HTTP ヘ ッ ダ 用 プロ パティ 名 Strict 
scheme プロ パテ ィ の 値 の 形式 Strict 

lang 言語 コー ド Strict 

dir 文字 表記 の 方 向 Strict 

noframes = 。 フレ ー ム が 使え な い 境 用 。 Frameset 148 
Class クラ ス 名 Frameset 
id ID 名 Frameset 
title 補足 情報 Frameset 
style スタ イル シー ト Frameset 
Iang 言語 コー ド Frameset 
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standby ロー ド 中 の メッ セー ジ 
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tabindex Tab 移動 順 
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言語 コー ド 

文字 表記 の 方 向 
メニ ュー の 選択 肢 
選択 状態 

値 

階層 メニ ュー 用 の 選択 肢 
選択 ・ 変更 不可 
クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
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id 

title 

style 

lang 

dir 
strong 

class 

id 

title 

style 

lang 

dir 


スク リプ ト フ ァイル の 文字 コー ド 
表示 され る 内 容 を 生成 し な い 


スク リブ ト 言 語 名 
3 
名 前 

リス ト ボ ックス の 表示 行 数 
複数 選択 可 
選択 ・ 変 更 不可 
Tab 移動 順 
クラ ス 名 

ID 名 

補 中 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
小さ な 文字 
クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
イン ライ ン の 範囲 の 設定 
クラ ス 名 
ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
取消 線 

クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
より 強い 強調 
クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 


Strict 
Strict 
Transitional 非 推奨 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Transitional 非 推奨 
Transitional 
Transitional 
Transitional 
Transitional 
Transitional 
Transitional 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 





148 


186.129 
129 
129 


58 


16 


31 

















type スタ イル シー ト 言 語 の MIME タ イプ Strict 
media 出力 対象 の メデ ィ ア タイ プ Strict 
title 補 定 情報 Strict 
lang 言語 コー ド Striot 
dir 文字 表記 の 方 向 Strict 
人 
class クラ ス 名 Strict 
id ID 名 Strict 
ttle 補足 情報 Strict 
style スタ イル シー ト Strict 
Iang 言語 コー ド Strict 
dir 文字 表記 の 方 向 Strict 
人 
class クラ ス 名 Strict 
id ID 名 Strict 
title 補足 情報 Strict 
style スタ イル シー ト Strict 
lang 言語 コー ド Strict 
dir 文字 表記 の 方 向 Strict 
ON 
summary 表 の 概要 Strict 
width 幅 Strict 
border 外 枠 の 太 さ Strict 
frame 外 枠 の 表示 形式 Strict 
rules セル を 区 切る 線 の 表示 形式 Strict 
cellspacing セル の 間隔 Strict 
cellpadding セル の 枠 と 内 容 の 間隔 Strict 
align 表示 位置 Transitional 非 推奨 
bgcolor 背景 色 Transitional 非 推奨 
Class クラ ス 名 Strict 
id ID 名 Strict 
title 補足 情報 Strict 
style スタ イル シー ト Strict 
RS 衣 lang 言語 コー ド Strict 
に dir 文字 表記 の 方 向 Strict 
IS 
レ align 行 揃え Strict 
ス valign 方 向 の 位置 揃え Strct 
char 位置 を 揃え る 文字 Strict 
chroff 位置 を 揃え る 文字 間 で の 距離 Strict 
Class クラ ス 名 Strict 
id ID 名 Strict 
title 補 中 情報 Strict 
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必須 


Style 
lang 
dir 

td 
rowspan 
colspan 
align 
Valign 
char 
charoff 
abbr 
axis 
headers 
SCODe 
nowrap 
bgcolor 
width 
height 
class 
id 
title 
Style 
Iang 
dir 

textarea 
roWs 
cols 
name 
disabled 
readonly 
tabindex 
CCeSskey 
class 
id 
title 
style 
lang 
dir 


align 
valign 
char 
chroff 
class 


スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 


デー タ セ ル 


下方 向 に 連結 する セル の 数 
右 方 向 に 連結 する セル の 数 
行 揃え 

縦 方 向 の 位置 揃え 
位置 を 揃え る 文字 

位置 を 揃え る 文字 まで の 距離 
見 出し セル の 省略 形 

見 出し セル の 分 類 名 

関連 する 見 出し セル の ID 名 
見 出し セル の 対象 と な る 範囲 
改行 の 禁止 


補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 


複数 行 の 入力 フィ ー ル ド 


行 数 

幅 (文字 数 ) 
名 前 

選択 ・ 変 更 不 可 
変更 不可 

Tab 移動 順 

92 思 呈 22 以 必 
クラ ス 名 

ID 名 

補 定 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 


表 フ ッ タ 


行 揃え 

縦 方 向 の 位置 揃え 
位置 を 揃え る 文字 

位置 を 揃え る 文字 間 で の 距離 
クラ ス 名 


種類 非 推奨 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Transitional 非 推奨 
Transitional 非 推奨 
Transitional 非 推奨 
Transitional 非 推奨 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 





必須 
必須 





70 
75 
75 
79 
79 


81 
83 
74 
74 


181 
121 
181 


79 
79 








rowSpan 
colspan 
lign 
Valign 
char 
charoff 
abbr 
axiS 
headers 
SCODe 
nowrap 
bgcolor 
width 
height 
class 
id 
title 
style 
lang 
dir 
thead 
lign 
valign 
Char 
chroff 
class 
id 
title 
style 
lang 
dir 
title 


lang 
dir 


引 ign 
valign 
char 


169 mAAot を 人 


ID 名 

補足 情報 

スタ イル シー ト 

言語 コー ド 
文字 表記 の 方 向 

見 出し セル 

下方 向 に 連結 する セル の 数 
右 方 向 に 連結 する セル の 数 
行 揃え 

縦 方 向 の 位置 揃え 
位置 を 揃え る 文字 

位置 を 揃え る 文字 まで の 距離 
見 出し セル の 省略 形 

見 出し セル の 分 類 名 

関連 する 見 出し セル の ID 名 
見 出し セル の 対象 と な る 範囲 
改行 の 禁止 

背景 色 


ス 名 

名 

補足 情報 

スタ イル シー ト 
言語 コー ド 

文字 表記 の 方 向 
表 ヘ ッ ダ 

行 揃え 

縦 方 向 の 位置 揃え 
位置 を 揃え る 文字 
位置 を 揃え る 文字 間 で の 距離 
クラ ス 名 

ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
文書 タイ トル 
言語 コー ド 
文字 表記 の 方 向 
表 の 横 一 列 

行 揃え 

縦 方 向 の 位置 揃え 
位置 を 揃え る 文字 


ロロ 
RW 





Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Transitional 非 推奨 
Transitional 非 推奨 
Transitional 非 推奨 
Transitional 非 推奨 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 
Strict 


75 
75 
79 
78 


81 
83 
74 
74 


88 
79 
79 


11.18 


70 
79 
79 





charoff 
bgcolor 
Class 
id 

title 
style 
lang 

dir 


class 
id 
title 
style 
lang 
dir 


class 
id 
title 
style 
Iang 
dir 

由 
type 
compact 
class 
id 
title 
Style 
lang 
dir 


class 
id 
title 
style 
lang 
dir 


※ イ ベン ト 属 性 は 省略 し て いま す 。 イ ベン ト に つい て は 、JavaScript バ パー ト を 参照 し て くだ さい 。 


位置 を 揃え る 文字 まで の 距離 
背景 色 

クラ ス 名 
ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
等 幅 フ ォ ン ト 
クラ ス 名 
ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
下線 

クラ ス 名 
ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
番号 な し リス ト 
マー ク の 種類 
詰め て 表示 
クラ ス 名 
ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 
変数 ・ 引 数 
クラ ス 名 
ID 名 

補足 情報 

スタ イル シー ト 
言語 コー ド 
文字 表記 の 方 向 


Strict 
Transitional 非 推奨 
Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 
Transitional 非 推奨 
Transitional 
Transitional 
Transitional 
Transitional 
Transitional 
Transitional 
Strict 
Transitional 非 推奨 
Transitional 非 推奨 
Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 

Strict 
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HTML4.01 対応 状況 一 覧 
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3 光 9 編 急 め 


略語 


acronym 頭字 語 


abbr 





の 9⑨ 人 。⑯ 人 ⑮⑯ 





2 9 品 人 Q りら り のり O 9QO や め @ 候 間 


連絡 先 


address 


applet 





9 9 約 信 @O の DD らら @ ひ @ 


JAVA ア プレ ッ ト 





イメ ー ジ マッ プ の 領 最 所 つ O 〇 〇 O OOOOOOO OoO 


rea 


b 





0 BB ね 5 旬 り なら 人 仙 @ 貞 





0 9 9 6 GO 6 人 Q ね WW @ る @ 


基準 URL 


base 





* O 
3 


に 3 
CI 


基準 フォ ント : 色 サイ ズ 〇 O 〇 OO O 


文字 表 


basefont 


bdo 
big 





X 


9. 人 


の 方 向 


村 





大 き な 文字 
gleekauet@」 ブロ ッ ク レ ベル の 引 上 用 文 つ DO 〇 O 〇 O OOOOO OO oO oO 


OO GO OOmO の O_ Oo 6 9 6 








SS 人 中 人 5 ら @⑨@ 人 ⑨⑳ る 人 公 公 


文書 本 体 


body 


br 





9 の 0_ 90 9 の 0 90 9 9 OO_QO 


9 の ⑨9 ⑨ @ 





O O O OO 4 


※ 


ボタ ン 


button 





9 Q りら @ @ 〇 6 人 @ Q 9 


表 の タイ トル 
中 央 揃え 


caption 





0 @⑳ @6 ⑨ ⑨ ⑨ ⑨ @ 人 @ @ 6 


center 
cite 





0 の ⑤6 Q 6060_9 0 9 @W_ の 9O_ 9 9 6 


出典 ・ 参 照 先 
ソー スコ ー ド 
表 の 縦列 





9 0 9 9 @⑨ ⑨⑨ @ @ ぐ ⑨ 人 ⑤@ の ぐ 


の ⑤ ぐ @ ⑩@ ゐる る 





人 人 


O ム 


col 





表 の 縦 別 の グル ー フ プ 化 O 〇 O の OO^ ム 


COIgroup 
dd 





の の の "の の 6) 9  @ @_ 9 ⑨@、@ _@ 


DC ら O の ⑤@ の @⑨@ @⑨ 


dl 要素 の 説明 部 分 
削除 部 分 





oO _ Oo oO oO Oo 
@_9_9_9 6 


し 


del 
dfn 
dir 





X 


CN 人 の SO の の 


定義 対象 の 用 語 





ck 2 0 9 仙 ぬ 9 9 人 ⑳ の 9 ぬ 《.@ 


ディ レク トリ ・ リ スト 





ブロ ッ ク レ ペル の 範囲 の 設 〇 〇 〇 O 〇 O OO OO OOO oO 


用 語 と 説明 の リス ト 
dl 要素 の 用 語 部 分 


強調 


div 
ll 





OO OO 9 0 QO Q6 @0 ⑨ ⑮ 6 





5 も  @ 0 ひめ O 公 人 人 6 


dt 





0 6 9 @ 90 9 oO QO 9 ⑤⑥.@ 


Bm 





フォ ー ム の 肉 容 の グル ー プ 化 つ O 〇 O 〇 O OO OO x の OOoOO OoO 


fieldset 


font 





フォ ント の 衝 類 色 サ イズ 〇 〇 〇 OOOOOOOO OoO 


入力 フォ ー ム 





ら _@ 0 ぐ _9 Q Q 6 ⑨9 9 6 3⑮ 


form 





GO ⑳ 人 9 らら @ 9 紀 呈 らら る 


フレ ー ム の 内 容 指定 
フレ ー ム の 定義 
hl rh6 見 出し 


frame 





OO D ほら 紀 @G GO 人 人 人 ぬ @ 


frameset 





0 IO 9 ゅ @ 〇 6 の 9 婦 O の 9 め 仙 
6 が 9 5 0 39 9。 9 外 選 の 人 仙 


壮 SNKSAK 





文書 情報 
横 野 線 


head 
hr 





貞 が GMO 0 0 9 0 9 りり ゆ 00 の @ 





0 0 の り 人 @ 人 9 め @⑳ ゆ @ 


最上 位 要 素 


html 
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thead 表 ヘ ッ ダ の QB QG 選 GO OX 必 ぬ の @ 人 信 の 
title 文書 タイ トル 9 GO で D 人 96 人 @ 人 六 仙 但 
Tr 表 の 横 一 列 9 9 の め @ @ 避 人 @ ⑨ @ 人 @ 人 QG 
tt 等 幅 フ ォ ン ト ら 6 の 6 @ ⑩⑳ @96 @ ⑤⑨ @ ^ 人 @ 
U 下線 9 の GO ⑥@ @0 の 0 @ ⑨@ Q SG く お 
回 番号 無し リス ト OO 6 ⑨0 0O 9 6 Q 9O 9 96 
Var 変数 ・ 引 数 の の OO OO Or SS ⑨ @ 9 





※ 各 要素 の 対応 状況 た を 、 〇 へ X の 3 段階 ヾ お お ま か に 示し まし た 。 
環境 や 細か い バ ー ジ ョ ン の 違い な ど に よっ て は 、 結 果 が 異な る 場合 も わり ます の で 、 注 意 し て くだ さい 。 





ドー ニー ンー ニニ ーー。 ジー デー 


| モー ド 端 末 で 利用 で きる 要素 ・ 属 性 一 覧 上 


要素 名 。 属性 名 











ペー ジ の 基礎 と な る 内 容 

HTML 

HEAD 

BODY 

TITLE 

BASE href 

く !- ーッ > 
NUTS 
H1-H6 align 

P align 

BLOCKQUOTE 

PLAINTEXT 

DIV align 

BR clear 

PRE 

CENTER 

HR align ・size ・width 

(人 RS MARSRWMDCSKSOR9 
A name ・href ・accesskey 
DS MyTR 果 
UL 

OL 

日 

DL 

DT 

DD 

DIR 

MENU 

画像 

IMG Src ・ lign ・width ・height ・hspace ・vspace ・alt 
ISA iii nd 
FORM action ・method 

INPUT type ・name Size ・maxlength ・value ・Checked ・gccesskey 
TEXTAHEA name ・「OWS ・COlS ・accesskey 

SELECT name ・Size 

OPTION selected 





※i モ ー ド 対応 の HTML に は 、1.0 か ら 5.0 まで の バー ジョ ン が あり ます が 、 こ こ で は 全 機 種 で 動作 可能 な 
i モ ー ド 対応 HTML1.0] の 要素 と 属性 を 紹介 し ます 。 

※ よ り 詳 し い 内 容 に つい て は 、「NTT DoCoMo Net」 の ホー ムペ ー ジ を 参照 し て くだ さい 。 
「DoCoMo Net - 作ろ う i モ ー ド コン テン ツ 」 
(http : //www .nttdocomo . co . Jp/p_s/imode/make/) 





AV で きこ 


モード 寺 で 用 で きる 表 放 人 - 覧 173 


Sc 捧 


上 。 HTML4.01 で 走 義 され て いる 特別 な 文字 中 


「 テ キス ト の 種類 ] の [特別 な 文字 を 表示 させ る 」(P.41) で は 、 日 本 語 環境 で も 使用 で 
きる 特別 な 文字 に つい て 説明 し まし た が 、HTML4.01 で は それ 以外 に も 多く の 文字 が 
定義 8 され て いま す 。 し か し 、 実 際 に 表示 で きる 文字 は 、 使 用 し て いる OS や プラ ウザ の 
バー ジョ ン な ど に よっ て 異な り ま す 。 特 に 日 本 語 環境 で 利用 し て いる 場合 に は 、 ほ と 
ん ど が 表示 で き な い 場合 も あり ます 。 こ こ で は 、 そ の 中 で も 多く の 文字 を 表示 可能 な 
Windows 版 の nternet Explorer 6.0 で の 表示 例 を 示し ます 。 


「 特 別 な 文字 ] は 、HTML4.01 で は 文字 参照 と し て 定義 され て お り 、 次 の 3 種類 に 分 
類 さ れ て いま す 。 


・ISO 8859-1 (欧米 : Latin 1) 


・ ギ リ シ ャ 文 字 ・ シ ン ボ ル ・ 数 学 記号 
・ そ の 他 の 特別 な 文字 





ここ に 定義 きれ て いる 文字 を 表示 させ る 場合 、「& を キー ワー ド :」 と いう 形式 と 、「&# 
番号 :] と いう 2 種類 の 形式 を 利用 する こと が で きま す 。 キ ー ワ ー ド に つい て は 、 大 文字 
と 小文字 は 別 の 文字 と し て 扱わ れ ま す の で 、 注 意 し て くだ さい 。 な お 、 キ ー ワ ー ド 形 
式 で は 表示 され な いも の で も 、 番 号 形 式 で 指定 する と 表示 され る 場合 が あり ます 。 


ISO 8859-1 (Latin 1) 
キー ワー ド 番号 キー ワー ド 上 番号 キー ワー ド 番号 





















































&nbsp: 60: |  &iexdl &#161:  &cent 人 &#162: 
 &pound: 人 & 電 63: ロロ &curren: & 才 64: ま 。&yen: &65: 
「 &bmban  & 紅 66, | S⑧ &sece  & 旨 6 | " &umk  &68 
aj &copyi &#169: m 。 &ordf _ &#170, | 《 &&laquo: 。 & 衣 71: 
ー 。&no &#72: &shy: 必 73: 全 。&reg: 衣 74: 
&mac 人 多 75: &deg: 人 #176: 下 &plusmn: &#77: 
2 。 &sup2: 78: 3 。&sup3:  & 才 79: - &acue 80 
1 &microi 人 &#181: | &parai 鐘 #182: ・ Kmiddot 改 灯 83: 
, cedil &#184: 1 。&supli &#185: 9 &ordm: 人 必 86: 
# 。 &raquoi 鐘 #187: 壇 &facl14  &#88: 2 &fac12) &189: 
私 &frac34, 怪 90: 。 Wiquest  &#91: | 入 &Agrave, &92: 
皮 KAacute: 。 改 #93: 上 。&Acirc 194: | 高 KKAulde: 改訂 95: 
衣 &Aumi  &96。 | 策 &Arng  &#i97, | 叩 &AElg  & 計 98: 
(の &&Cced 人 &#199: &Egrave: &#200: 必 E 飲 Eacute: 人 #201: 
EE &Ecire  &202: EE &Eumk  &#203: | 1 edgrwe &#204 
{ &lacue  &#205: 1 elcire &#206: | ] euml &#207: 





174 HTML4.01 で 定義 きれ て いる 特 列 な 文字 


























































































































 。&ETH: &#208: IN &Nalde. &#209: O &Ograve: &#210: 
〇 OOacutei 。&#211: 〇 &Odirc: 。&#212: O _&Ouldei 。&213: 
O _&Oumli  &214: X gdmes: &4215: の &Oslsh: 8&#216: 
U &Ugrwe』 8&217, | U &Uacuee 8&218。 | 人 &Udre  &219: 
U &Uuml 人 &#220: Y Yacute, &#221: D 。&THORN. &#222: 
H &slgi &#223: a 8agraver &24: 全 C&aacute:  &#225: 
全 。&aciro &#226, | 結 &anlde.  &#227: 人 &aumli  &28: 
Saring 人 &#229: | &aelig: &#230: r _ &cced 山  &#231: 
E  K&egrave: 232: E 8&eacure, &#233: E  &ecirci 234: 
E 。&euml &235, | i &igrave: 8&#236: 1 &iacute: 8&#237, 
1 。&icire &#238: 1 &iuml: &#239: 9 &eth: 240: 
耳 。 &ntildei  &#241: 9  &ograve: 。&#242: 6 &oacute: 。&#243: 
6@ &ocire &#244 6 &oulder  &#245: 9 &oumli  &246: 
て 。&divideg 8&4247:  。&oslash: 248: u 。 &ugrave: &#249: 
uu 。 &uacutei  &#250: 人 &ucirc  &#251: 1 。 &uumli  &252: 
》 。&yacue  &253 b gthom: 。&3254: 》 &yuml  &4255 
ギリ シャ 文字 ・ シ ン ボ ル ・ 数 学 記号 
マコ キー ワー ド 番号 キー ワー ド # 番 号 
了 &fnof &#402) | 自 &Alpha:  &#913: B &Bem:  &#914 
1 &Gamma: &#915: 此 &Dela:  &#916: E &Epsilon: &#917, 
婦 。&Zetai 人 #918: H &Ei 人 &#919: @⑳ &Them: &#920: 
] &lota 人 #921: KG &Kappa: 。&922: 貞 &Lambdai 人 #923: 
MT &Mu &#924: NN &Nui 人 #925: 品 。 &Xh 人 926: 
〇 。&Omicron: &927: [gpi &#928: R&Rho: &#929: 
231 &Sigmai 区 約 31 T 。&Tau 人 &#932: YY &Upsilon: &#933: 
る ⑧ &Phi &#934,。 | XX &Chi  &#935: | 中 &Psk &#936: 
9 &Omega:  &#937: w alpha:  &#945: BE &besi &#946: 
Y『 。 &gammai &#947: 6  &delta: 人 #948: =  &epsilon: &#949: 
と 。&zetm &950: T  &eta: 人 &#951: B  &thetai 人 #952: 
1  &iota 人 &#953: K &kappa:  &#954: ん 。 &lambda: &#955: 
比 mui 人 #956: ゼー nui #957: 加 xi 人 K#958: 織 
o  &omicron: 59: Tpi &#960: P &rhoi 人 &#961: 8 
G Ksigmafi  &#962: O sigmai  &#963: て taui &#964: 3 
や &upsilon: &#965:  &phi &#966: ア chii 人 K#967: 02 
WC&psi &#968: の &omega: amp:969: B  &thetasym: &#977: に 
&upsih: 人 &K#978: &piv 人 &#982: * &bull 人 &#8226: ス 
&helip:  &#8230, | ' gprime  &#8242, | "  &Prime 8&#8243 
&oline: &#82546 | / &fmasl &#8260: &weierp: 。& 紹 472: 
&imagei 人 &#8465: &real &#8476: TMf &trade: &#8482: 





HTML401 で 定義 きれ て いる 特別 を 字 175 


AV で SN ご 打 

















































































































&aleym: 8&#8501, | を garm &8592, | 1 &uarm 8&d8593, 
ー タ &rarri &#8594: 直 &darri &#8595: な &harr &#8596: 
KKcrarri &#8629, | を - &Arr &#8656: &uArr &#8657: 
 。&rArr &#8658: &dArri 必 #8659: 受 &hArri 人 &#8660: 
マ cforl  &#8704: | 9 &parm  &#8706. | ゴ &ese  &d8707: 
&empoyi 人 &#8709: V enabla: &#8711: 3: isin &#8712: 
&nodni &#8713, | ヨ &ni &#8715: 中 &prodi &#8719: 
テ sumi 人 &#8721: ー 色 minus:  @&#8722: &&lowast &#8727: 
有 叶 _&radici &#8730, | CC &prop:  &#8733, | Go &infin:  &#8734: 
グ &ang &#8736, | 八 8&andi &#8743, | WV &os 8&#8744: 
 &cap: &#8745: | U ecup &#8746: ! inc 8&#8747: 
・. there4:  &#8756: < &simi &#8764: &cong:  &#8773: 
を 。&asympi  &#S776, | &nei &#8800: 三 &equiv: &#S801i 
く 。&le &#8804: > &gei &#8805: ご &sub: 人 &#8834 
つ 。&sup:  &#6835 &nsub:  &#S836: 三 &sube  &#8838: 
 。&supe: &#8839: | BB &oplus:  &#GS853: &otumesi 。&#S855: 
正 &perp:  &#8869: &sdot &#S901, | &lcel  &88968: 
&rce &#8969: &lHoor:  &#8970: &rHoor, 。&#8971: 
&langi &9001: &rangi 人 &9002: 人 &loz 改 #967 條 
- 全 spades: 9824。 | 名 &clubs  &#9827: 党 heari:  &#9829: 
* diamsi  &#9830: 
その 他 の 特別 な 文字 
キー ワー ド # 番 号 キー ワー ド # 番 号 キー ワー ド # 番 号 
&quot 。 83 & 8&amp: 8&38 く le &#60, 
2: 865 &#62: 中 &OElg: &#338: Ce &oelig 人 #339: 
S  &Scaron, 。&#352: 8 8scaron: &#353: 放 Y &Yuml  &876. 
^ gcirc &710) | “ &elde  &732: | &ensp: 。 &819 全 
&emspi 。 &#8195: &thinsp:  &#8201: &zwnji &#8204: 
&zwji _&#5205: &Irm: &#8206: &rlm: &#8207: 
ー Ke&ndash:  &#8211, | 一 &mdash: 、&#8212: lsquo: 。&#8216: 
"grsquo: 。 88217, | 。 8sbquo: &#8218, | " gldquo: &#8220: 
” 。 &rdquo: 。 &%8221, | 。 &bdquo: &8222) | 1 gdaggen &8224: 
† 。&Dageerk 。&#8225, | 9%。 &perm 時 。 &#8240: { 。&lsaquo: 。&#8249: 
)  &rsaquo: 。&#8250. | ぞ K&euroi &#8364 
※ こ の サン プル で は 、Windows XP 上 で Internet Explorer 6.0 を 使い 、 も っ と も 一 般 的 と 思わ れる 設定 (文字 


コー ド は 「 シ フト JIS] ・ フォ ント は 「MS ゴシック 」) で 、 番 号 形式 で 文字 を 指定 し て 表示 させ まし た 。 表示 され 
な い 、 ま た は 文字 化け し て し まう 文字 に 関し て は 、 空 欄 に し て あり ます 。 
詳細 な 使用 方 法 は 、「 テ キス ト の 種類 ] の 「 特 別 な 文字 を 表示 させ る 」 (P.4 1) を 参照 し こく だ さい 。 


1276 HmW4o で 人 まれ て いる 和 | 


HTML。CSS。 


JavaScript 
辞典 』』 




























HTML は 基本 的 に 文書 の 構成 要素 の 意味 や 役割 を 示し ます が 、 そ の 構成 要素 を 具体 
的 に どの よう に 表示 させ る か を 指定 する の が スタ イル シー ト で す 。 ス タイ ル シ ー ト を 
導入 する と 、HTML で は 不可 能 な 多く の 表現 が 可能 に な る だ け で な く 、HTML が シン 
プル に な っ て 容量 が 減り 、 ペ ー ジ の 更新 や 修正 な どの メン テ ナ ン ス も 大 幅 に 楽に な り 
ます 。 ま た 、 表 示 に 関す る 指定 を HTML か ら 取 り 除 く こ と に よっ て 、 そ の ペー ジ が よ 
り 多 く の 環 境 で 利用 で きる アク セ シ ブ ル な も の に も な り ま す 。 


し か し 、 ス タイ ル シ ー ト 自体 は それ ほど 難し く は な い の で す が 、 各 プラ ウザ の スタ 
イル シー ト へ の 対応 状況 に は 、 注 意 する 必要 が あり ます 。 特 に 古い プラ ウザ の 中 に は 、 
正しく 表示 で き な い も の や 、 間 違っ た 解釈 で 表示 する も の が 多く あり ます 。 本 書 で は 、 
各 解 説 ペ ー ジ や リフ ァ レ ンス で プラ ウザ の 対応 状況 を 掲載 し て いま す の で 、 参 考 に し 
て くだ さい 。 


な お 、「 ス タイ ル シ ー ト 」] と いっ て も 実際 に は 何 種類 か の 言語 が 存在 する の で す が 、 
本 書 で スタ イル シー ト と いう 場合 に は 、 現 在 も っ と も 広く 利用 が 可能 な CSS (Cascading 
Style Sheet) の こと を 指し て いま す 。 そ し て 本 書 で は 、 そ の 中 か ら 現 在 、 実 際 に 利用 可 
能 な も の を 中 心 に 解説 し て いま す 。 


CSS は 、 基 本 的 に 次 の よう な 書式 で 記述 され ます 。 





セレ クタ と は 、 ど の 要素 に 対し て スタ イル を 適用 させ る か を 指定 する 部 分 で す 。 こ 
の 部 分 で スタ イル の 適用 対象 を 示し 、 そ れ に 続く 「[ 一 )」」 の 中 に 適用 させ た い ス タイ ル 
を 記述 し ます 。 プ ロ パ ティ と は 、 セ レク タ で 指定 し た 要素 に 適用 する スタ イル の 種類 
を 示す 部 分 で す 。 色 を 表す 「color」 や 、 フ ォ ン ト サ イ ズ を 表す 「font-sizec」 な ど が これ に 
あたり ます 。 こ れ に 続け て 「:」 記 号 と 値 を 記述 する こと で スタ イル を 設定 する こと が で 
きま す 。 ス タイ ル は 、「:] で 区 切っ て 複数 指定 する こと が で きま す 。 


・h1 要素 の フォ ント サイ ズ を 24 ポイ ント に 設定 し た 例 








・h1 要素 の フォ ント サイ ズ を 24 ポイ ント に 、 色 を 青 に 設定 し た 例 


指定 する スタ イル が 多い 場合 に は 、 次 の よう な 書き 方 も で きま す 。 こ の 場合 、 ス タ 
イル と スタ イル の 間 を 「:] で 区 切る こと を 忘れ な いよ うに し て くだ さい 。 


h1 { 
Font-size: 24pt: 
color: b]ue: 


5 


単位 に つい て M 


CSS で 大 き さ を 指定 する 場合 に は 、 数 値 に 次 の 単位 を 付け て 示す こと が で きま す 。 
これ ら は 、 絶 対 的 な 値 を 示す 単位 と 、 相 対 的 な 値 を 示す 単位 の ふた つ に 分 類する こと 
が で きま す 。 具体 的 な た 大き さ に つい て は 、 巻 末 付 録 の TWeb サイ ズ チ ャ ー ト ] を 参照 し 
て くだ さい 。 


絶対 的 な 値 を 示す 単位 織 














In イン チ (1 イン チ =2.54cm) 

Cm セン チ メ ー ト ル の 
mm ミリ メー トル 由 
pt ポイ ント (1 ポイ ント =1/7 ら インチ) い 
pc バイ カ (] パイ カ =18 ポ イン ト ) 3 

相対 的 な 値 を 示す 単位 

em その 範囲 で 有効 な フォ ント の 高 さ を ] と する 単位 

eX その 範囲 で 有効 な フォ ント の 小文字 の 「x」 の 高 さ を ] と する 単位 

DX 1] ピク セル を 1 と する 単位 

% ょ 他 の 基準 と な る 大 き さ に 対す る 割合 (基準 は それ ぞ れ 異な り ま す ) 





※ 値 が 0 の 場合 は 、 単 位 を 省略 する こと が で きま す 。 











CSS で 色 を 指定 する に は 、 以 下 の 5 つ の 方 法 が あり ます 。 具体 的 な 色 と そ の 値 に つ 
いて は 、 巻 末 付 録 の 「 カ ラー チャ ー ト 1 一 3] を 参照 し て くだ さい 。 


16 進数 で 指定 する 1 (#RRGGBB 形式 ) 

HTML の 場合 と 同様 な 指定 方 法 で す 。「 理 記号 に 続け て 、RGB(Red、Green, Blue) の 各 
値 を 2 桁 ず つの 16 進数 で 示し ます 。 

た と えば 、 赤 を 指定 する 場合 に は 「#ff0000] と な り ま す 。 


16 進数 で 指定 する 2 (#RGB 形式 ) 

この 指定 方 法 は 上 記 の 方 法 に 似 て いま す が 、RGB の 各 値 を それ ぞ れ 1 桁 ず つの 16 進 
数 で 示し ます 。 こ の 値 は 、 指 定 し た RGB の 各 1 桁 の 値 を ふた つ 続 け て 並べ た 数 値 と し 
て 解釈 され て 表示 され ます 。 

た と えば 、「 導 36」 と 指定 し た 場合 に は 、「#ff3366」 を 指定 し た の と 同じ 結果 に な り ま 
す 。 赤 を 指定 する 場合 に は 「 指 00] と な り ま す 。 


10 進数 で 指定 する (rgb(n,n,n) 形 式 ) 

この 指定 方 法 で は 、 rgb に 続く 0 の 中 に R と G と B の 10 進 数 の 値 を それ ぞ れ 「.,] で 
切っ て 示し ます 。RGB の 各 値 は 0 255 の 範囲 で 指定 する こと が で きま す 。 

た と えば 、 赤 を 指定 する 場合 に は rgb(253.0.0)] と な り ま す 。 


% で 指定 する (rgb(n%,n%,n%) 形 式 ) 

この 指定 方 法 で は 、rgb に 続く () の 中 に R と G と B の パー セン ト の 値 を それ ぞ れ 「,] 
で 区 切っ て 示し ます 。 RGB の 各 値 は 0%~ 100% の 範囲 で 指定 する こと が で きま す 。 

た と えば 、 赤 を 指定 する 場合 に は 「rgb(100%.0%.0%)] と な り ま す 。 


色 の 名 前 で 指定 する 

HTML4.01 で 定義 され て いる 16 色 を 名 前 で 直接 指定 する こと が で きま す 。 ま た 、 シ 
ステ ム で 利用 きれ て いる 人 色 を 指定 で きる キー ワー ド も 用 意 さ れ て いる の で す が 、 本 書 
で は 省略 し ます 。 





凶 


各 要 素 は 、 ボ ックス と 呼ば れる 四角 い 領 域 を 生成 し ます 。 こ の 領域 は 、 次 の 4 つの 
部 分 か 構成 され て いま す 。 





ボッ クス の 構造 


マー ジン : margin 四 




















・ 内 容 (content) 
テキ スト や 画像 な どの 、 要 素 の 内 容 が 表示 され る 領域 で す 。 こ の 領域 の 幅 と 高 さ は 、 
width プロ パテ ィ と height プロ パテ ィ で 指定 する こと が で きま す 





・ 内 容 の 周り の 空間 (padding) 
内 容 が 表示 され る 部 分 と 枠 線 の 間 の 空間 部 分 の 領域 で す 。 要素 に 対し て 指定 され た 
背景 は 、 こ の 領域 に も 描画 され ます 


・ 枠 線 (border) 
要素 の 周り に 表示 させ る こと の で きる 枠 の 部 分 を 示し ます 。 


・ マ ー ジ ン (margin) 
ボッ クス の 一 番外 側 の マー ジン 領域 を 示し ます 。 要素 に 対し て 指定 され た 背景 は 、 
ここ に は 表示 され ず 、 背 景 は 常に 透明 と な り ま す 。 








スタ イル シー ト は 、 そ の 文書 を 制作 し た 人 だ けが 設定 で きる と いう も の で は あり ま 
せん 。 プ ブラ ウザ に よっ て は 、 ユ ー ザ ー が 任意 の スタ イル シー ト を 適用 で きる よう に な っ 
て いる も の も あり ます 。 ま た 、 プ ラウ ザ は デフ ォ ル ト の スタ イル シー ト 持 っ て いて 、 最 
初 に それ を 適用 する こと に な っ て いま す 。 つ まり 、 ひ と つの 文書 に 対し て 、「 制 作者 」 
「 ユ ー ザ ー」「 プ ラウ ザ ] の 三 者 か ら 、 同 時 に スタ イル シー ト が 適用 され る 可能 性 が ある 
わけ で す 。 そ し て 、 ス タイ ル シ ー ト が 部 分 的 に 競合 する 可能 性 も 出 て きま す 。 


その よう に スタ イル が 競合 する 場合 の 優先 順 は 、 次 の よう に な っ て いま す 。 
・ 制 作者 の スタ イル シー ト 


信 優 先 ( た だ し 「!important] を 使え ば ユー ザー 側が 優先 ) 
・ ユ ー ザ ー の スタ イル シー ト 


含 優先 
・ ブ ラウ ザ の デフ ォ ル ト ・ ス タイ ル シ ー ト 





通常 は は ユー ザー」 の スタ イル シー ト よ り も 「 制 作者 ] の スタ イル シー ト が 優先 きれ る の 
で す が 、「!important] と いう キー ワー ド を 使用 する こと で 、 こ れ を 逆転 きせ る こと も で 
きま す 。「!importantl は 、 次 の よう に 優先 させ た い 「 プ ロ パ ティ : 値 ] の 後に 指定 し ます 。 


この キー ワー ド は 、「 制 作者 ] の スタ イル シー ト で も 使用 する こと が で きる た め 、 
「iimportant | 自体 も 競合 する 可能 性 が あり ます 。 し か し 、 こ の 場合 も 「 ユ ー ザ ー」 の スタ 
イル シー ト が 優先 され る 仕様 に な っ て いま す 。 


また 、 同 じ ス タイ ル シ ー ト 内 で も 競合 が 起こ る こと が あり ます 。 そ の 場合 で も 
「'important] を 使っ て スタ イル を 優先 させ る こと が で きま す が 、 一 般 的 に は より 細か い 
部 分 で 指定 し て いる スタ イル が 優先 され ます 。 た と えば 、 要素 に 対し て 指定 し た スタ 
イル より は クラ ス に 対し て 指定 し た スタ イル 、 ク ラス に 対し て 指定 し た スタ イル より 
は id で 指定 し た スタ イル が 優先 る さき れ ます 。 も し 、 そ れ で も 競合 し て し まう 場合 に は 、 
より 後に 指定 され た スタ イル が 優先 され ます 。 


人 
In 
に 1 
いこ 】 


書 た ファ イル を 読み 込む 


<Hnfkk rel="stylesheet' href=" び fg ア " type="text/css"> 





如 re7ox 


URL 読み 込む CSS ファ イル の UHL og 
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スタ イル シー ト の 読み 込み 
HTML 文 書 スタ イル シー ト 


<!DOCTYPE … > 

<htm1> 

<head> 

<1ink 一 > background: 一 
</head> 

<body> 

</body> 

</htm1> 


は 隊 ま 族 SSO 人 





1 つの スタ イル シー ト を 複数 の HTML 文 書 へ 複数 の スタ イル シー ト を 1 つの HTML 文 書 へ 
HTML 文 書 HTML 文 書 スタ イル シー ト 










































万 refox 
Moz//a 
リリ リル 
W6.X 
リル 


スタ イル シー ト の み を 記述 し た 別 の ファ イル (拡張 子 は 通常 「.css」) を 用 意 し て 、 そ れ を 
HTML 文書 に 読み 込ん で 適用 させ た い 場 合 に は 、tink 要素 を 使用 し ます 。 

この 要素 は 、 必 ず <head> ~- </head> の 範囲 内 に 配置 する よう に し て くだ さい 。 複数 の 
ファ イル を 読み 込み た い 場 合 に は 、 こ の 要素 を 必要 な 数 だ け 配置 する こと が で きま す 。 
また 、 複 数 の HTML 文書 で 共通 する CSS を まとめ て 別 フ ァイル に し て お き 、 そ れ を 読 
み 込 ん で 利用 する よう に し て お け ば 、CSS ファ イル を 修正 する だ け で 一 度 に 複数 の 
HTML 文書 の 表示 方 法 を 変更 で きる よう に な り ま す 。 


EETTTE 間 Lu リー - 


【HTML】 

<!DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTML. 4.01 Transitiona] / /EN" 
"http : / /www .w3 . org/TR/htm14/1oose .dtd"> 折 | 

<htm] 1ang="]a"> 

<head> 

<meta http-equiv= "Content-Type" content="text/htm] : | 
charset=ShifFt_ JTS"> 

<tit1e>CS8 の 組み 込み </tit1e> 

<1injk re1="gty1esheet" href="deFau1t .Cgg" type="text/Cgg"> 

</head> 

<body> 

<h1>CSS の 組み 込み </h1> 

く D> 

HTM 文書 に スタ イル シー ト を 組み 込む に は 、3 つの 方 法 が あり ます 。 

びと つ は 別 の ファ イル に スタ イル シー ト だ け を 記述 し て それ を 読み 込む _ 

方 法 で 、 後 の ふた つ は HTML 文書 に 直接 スタ イル シー ト を 書き 込む 方 法 で す 。 

</p> 

</body> 

</htm1> 


【CSS (default.css の 内 容 ) 】 
body 
margin: 0: 
color: #000000: 
background: #00cc99 ur1 (back.]pg) 
} 
BB 呈 
Font-size: medium: 
margin: 0: 
padding: 0.3em: 
co1or: #EEFFff: 
jbackground-co1or: #000000 





p { 
1ine-height: 1.8: 
marg1n: 1.6em 1.6em 1em 36 も : 





padding: 1em: 
border: doEEed 3px #EFFFFF 








re7ox 
dg 
リル, 


t⑳2 HTML : 「 文 書 情報 ] の 「 関 連 す る 他 の ペー ジ を 示す 」 (P.28) A6.X 


HTML : コラ ム 「 ペ ー ジ 同士 の 関係 を 表す 値 ] (P.23) 


OperaZ 
Operg6 


Sa ね が 


圧 5-mac 
放 4-mac 





Netscape Navigator 4.X に だ け CSS を 適用 させ な い 方 法 

link 要素 で CSS の 書か れ た 別 フ ァイル を 読み 込む 場合 、 media 属性 を 使用 し て 、 
その スタ イル シー ト が 想定 し て いる 出力 対象 を 指定 する こと が で きま す 。 指定 可能 
な 値 は 以下 の も の で 、「,」 で 区 切っ て 複数 指定 する こと も で きま す 。 

引 すべ て 

Screen 一 般 の コン ピュ ー タ の 画面 (デフ ォ ル ト ) 

tty 文字 幅 が 固定 の 機器 

tv 2 避 

projection 2 本 グ 2 タ 

handheld 携帯 用 端末 

print 請 多 

braille 点字 ディ スプ レイ 

embossed 点字 プリ ンタ 

ural 音声 に よる 出力 


区 SSo 上 


と ころ で 、Netscape Navigator 4.X は 、 こ の media 属性 の 値 と し て 「screen] 
以外 を 指定 する と 、 ス タイ ル シ ー ト を 読み 込ま な いよ うに な っ て いま す 。 し た が っ 
て 、Netscape Navigator 4.X に だ け ス タイ ル シ ー ト を 適用 し た く な い 場 合 に は 、 
[media='all'l や [media="screen.tv'] な どの よう に 指定 し て お け ば OK で す 。 


<1ink re]="stylesheet" href="base.CSss" type="text/css" 骸 
med1ia= "Screen , 上 "> 








EN 4【- ま まさ リド ビィ Pr し ん 





<8tyle type="text/cs5"> 一 </style> 
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ファ イル ) 弧 ( 表示 Q⑰ お 気に入り @ Q 
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HTML 文書 の 中 に CSS を 書き 込む 場合 に は 、 style 要素 を 使用 し ます 。 

この 要素 は 、 必 ず <head> 一 </head> の 範囲 内 に 配置 する よう に し て くだ さい 。 <style> 一 
<style> の 範囲 に は 、 直 接 CSS を 書き 込む こと が で きま す 。 こ の 時 、 ス タイ ル シ ー ト に 
未 対応 の プラ ウザ が CSS の ソー ス を テキ スト と し て 表示 し て し まう こと を 避け る た め 
に 、CSS 全体 を HTML で の コメ ント (<!-ー-->) に し て お く こ と が で きま す 。 





LSomnlc 王 還 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN" 
"hp : / /www .W3 . org/TR/htm14/1oose .dtd"> al 
<htm1 1ang="]a"> 
<head> 
<meta htp-equ1iv="ConEent-Type" content="Etex/htm] : | 
charset=ShifFt_ JTS"> 
<tit1e>CSS の 組み 込み </t1t1e> 
<sty1e type="text/oCsg"> 
ーー 
body { 
margin: 0: 
co1or: #000000: 
background: #00cc99 ur1 (back.]pg) 
} 
RE t 
Font-size: medium: 
margin: 0: 
padding: 0.3em: 


eo com22e 





col1or: #EFFfFfFFf: 
background-co1or: #000000 

} 

p 【 
1ine-height: 1.8: 
margin: 1.6em 1.6em 1em 36$ も : 
padding: 1em: 
border: dotted 3px #FFFFfF 

} 


ーー テ 


2.X 
</sty1e> Ps 
</head> Ope/g/ 
<body> Opera6 
<h1>CS8 の 組み 込み </h1> 
<p> Sa ね 
HTM 文書 に スタ イル シー ト を 組み 込む に は 、3 つの 方 法 が あり ます 。 /E5-mmac 
ひと つ は 別 の ファ イル に スタ イル シー ト だ け を 記述 し て それ を 読み 込む 」 /E4-mac 
方 法 で 、 後 の ふ た つ は HTMr 文書 に 直接 スタ イル シー ト を 書き 込む 方 法 で す 。 


</p> 
</body> 
</htm1> 








任意 の 要素 に style 属性 の 値 と し て 組み 込む 


< 要素 名 style=" スタ イル シー ト た "> 
< 要素 名 skyle=" スタ イル シー ト j スタ イル シー "> 
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HTML 文書 中 の 任意 の タグ に style 属性 を 追加 し て 、 そ の 要素 だ け に 有効 な CSS を 書き 
込む こと が で きま す 。 

複数 の 指定 を し た い 場 合 に は 、 そ れ ぞ れ を 「:」 で 区 切っ て 指定 し ます 。 こ の 方 法 を 利用 
する 場合 は 、 そ こ に 書か れ て いる スタ イル シー ト 言 語 (CSS 以外 も あり えま す ) を 特定 
する 手段 が あり ませ ん の で 、meta 要素 を 使用 し て 必ず デフ ォ ル ト の スタ イル シー ト 言 
語 を 宣言 し て お く よ う に し て くだ さい 。 

な お 、spyle 属性 は 、HTML の 新しい 標準 仕様 (KHTML1.1) で は 非 推 巻 と され て いま す 。 


|Samplo 二 還 還 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN" 
"hp : / /www .w3 . org/TR/htm14/1oose .dtd"> 内 
<htm] 1]ang="]a"> 

<head> 

<meta htp-equiy= "ConEent-Type" conten キ =" て ex /htm1 : | 
charset=Sh1ft JTS"> 

<meta ht 上 tp-Gqui マ ="Content-Sty1e-Type" content="texxt/oss"> 
<tit1e>CSS の 組み 込み </tit1e> 

</head> 

<body sty1e="marg1n:0: Co1or:#000000: background:#00cc99 軸 

ur1 (back. pg) "> 

<h1 sty1le="Font-size: mediumz: margin: 0: padqding: 0.3emz co1or: | 
#EEFFFF: bacjkground-co1or: #000000『> 

C88 の 組み 込み 

</h1> 


NM ceeo2 

















<p sty1e="11ne-height: 1.8: margin: 1.6em 1.6em 1em 36%: paddings 
1em: border: dotted 3pxr # 下 "> 
HTML 文書 に スタ イル シー ト を 組み 込む に は 、3 つの 方 法 が あり ます 。 

ひと つ は 別 の ファ イル に スタ イル シー ト だ け を 記述 し て それ を 読み 込む 」 

方 法 で 、 後 の ふ た つ は HTWL 文書 に 直接 スタ イル シー ト を 書き 込む 方 法 で す 。 


く /p> 
</body> 
</html> 
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スタ イル シー ト は 別 フ ァイル に する の が ベス ト 
左 ペ ー ジ の style 属性 の 解説 で も 触れ まし た が 、XHTML 1.1 で は style 属性 は 非 
推奨 と され て いま す 。 ま た 、style 要素 を 使う 方 法 に 関し て は 、XHTML で は 特定 
の 文字 や HTML の コメ ント が 使え な いな ど 、 色 々 と 不都合 が 生じ ます 。 将来 HTML | 
を XHTML に 変更 する 可能 性 が ある 場合 は 、 ス タイ ル シ ー ト を 別 フ ァイル で 用 意 し | 
て 、 そ れ を 読み 込 び よう に し て お いた ほう が よい で し ょ う 。 ま た 、 そ の よう に する 
と 、 特 定 の ブラ ウザ に だ け ス タイ ル シ ー ト 適用 させ な いよ うに する こと も 可能 に な 
り ま す (P.185 の TIPS 「Netscape Navigator 4.X に だ け CSS を 適用 させ な い 
方 法 | 参照 )。 
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特定 の 要素 に 適用 させ る 


Internet Explorer 6.0 Firefox 1.0 
人 5 守 の 夫 未 ( 芝 用 ませ じ THMTT rnel Explorer x 特定 の 凍 を 要 用 さり る 
カイル) 編集 D 表示 び ) お 気に入り @⑯) ツー ル ①D へ ルプ ⑬ 


OR・ の 回 還る の 時 5m2p 


THRHLZ7iza noummo0i 








これ (は p 要 素 の 内 容 で す 。 | これ は 要素 の 内 容 で す 。 


ーー ーー っ | 






































指定 し た 要素 に 対し て 、 ス タイ ル を 適用 させ た い 場 合 の 書式 で す 。 


| Samplc 王 還 時 


< く !DOCTYPE HTMTL PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN" 


"http: / /www .w3 . org/TR/htm14/1oose .dtd"> al 
<htm] 1ang="]a"> 
<head> 


<meta htp-equiv="Content-Type" content="text/htm] : 
charse 上 =Shift_JTS"> 
<tit1e> 特定 の 要素 に 適用 させ る </t1t1]e> 

<Ssty1e type="text/css"> 








0 デ ご 
body { margin: 3em } 
h1 { 
Font-size: medium: /* 文字 サイ ズ を 標準 に */ 
padding: 0.3em: 
Co1or: #EFfFFff: /* 文字 色 を 白 に */ 
background: #FE6600 /* 背景 色 を オレ ンジ に ょ */ 
} | 
めも 


padding: 1em: | 
border: doub1e 3px #FF6600 /* オレ ンジ の 2 重 線 で 囲む */ 


} 
EE | 
</ sty1e> 

</head> 

<body> 

<h1> これ は h1 要素 の 内 容 で す 。</h1> 
<p> これ は p ゎ 要素 の 内 容 で す 。</p> 
</body> 

</htm1> 


10 CNS 


複数 の 要素 に 適用 させ る 
要素 名 , 要 東 名 , 要 間 名 , … { 一} 
※ [要素 名 」 の 部 分 に は 、「 草 名 ] や 「. ク ラス 名 」 も 指定 で きま す 。 






ルル 
Internet Explorer 6.0 93173( ひ る 7 


記 補 秦 の 東 務 に 間 用 と せる jcrojo xplorer 確 落 の 厚 和 に 芝 用 させ る - Mozillo Firefpz 
ファ イル 直入 ⑤ 表示 移動 ③) プッ マーク て 6 


を - ゅ -@O の om 


ED これ は hl 要素 の 内 容 で す 。 
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指定 し た 複数 の 要素 に 対し て 、 同 じ ス タイ ル を 適用 させ た いり 場合 の 書式 で す 。 
要素 の 名 前 だ け で な く 、「 打 D 名 ] や 「. ク ラス 名 」 を 指定 する こと も で きま す 。 


Er 拓 | * 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN" 
"httD: / /Www .w3 . org/TR/htm14/1oose .dtd"> 4j 
<htm1 1ang="]a"> 
<head> 
<meta htEtDp-equ1v="ConEent-Type" conEent="Eext/htm1 : 
charset=Sh1fFt JTS"> 紀 
<tit1e> 複数 の 要素 に 適用 させ る </tit1e> 
<sty1e type="tex/css"> 
< で es 
1h1, p { 
font-size: medium: /* 文字 サイ ズ を 標準 に */ 
padding: 1em: 
border: doub1e 3px #FE6600 /* オレ ンジ の 2 重 線 で 囲む */ 
} 
ーー テ > 
</ sty1e> 
</head> 
<body> 
<h1> これ は h1 要素 の 内 容 で す 。</h1> 
<p> これ は p 要 素 の 内 容 で す 。 </p> 
</Dody> 
</htm1l> 


(9 要素 名 : [CSS を 適用 する 対象 」 の 「ID や クラ ス を 指定 し た 要素 に 適用 させ る 」 (P.193) 


ET 





すべ て の 要素 に 適用 させ る 
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IGG で り 【 り YO まり 9 いる まり 
訪 すべ て の 要素 に 用 で せる - Microxoft nternet Explorer 区 すべ て の 要 二 に 適用 させ る - Mozilla Firefox =5 隔 
アイ ル G 引 信 ⑰) 表示 Q⑰ お 気 に AO⑧ アイ ル D 才 生 ) 表示 衝動 Q) プッ クマ ーDG) ツー ル OD AMZGD 8 
全 っ 中. ま の の 9 
これ は hl 要素 の 内 容 で す 。 
これ は I2 要 素 の 内 容 で す 。 
これ は 5 要 素 の 内 容 で す 。 


これ (は ht 要素 の 内 容 で す 。 
これ (3H2 要 系 の 内 容 で す 。 
これ (は h3 要 系 の 内 容 で す 。 
机 これ は I4 要 系 の 内 容 で す 。 
これ (3hq 要 系 の 内 容 で す 。 


これ は !5 要 素 の 内 容 で す 。 
これ は I5 要 素 の 内 容 で す 。 れ は 5 要素 の 内 容 で 


これ は I6 要 素 の 内 容 で す 。 これ は ip 要素 の 内 容 で す 。 
これ は p 要 系 の 内 容 で す 。 





これ は p 要 素 の 内 容 で す 。 


すべ て の 要素 に 対し て スタ イル を 適用 させ た い 場 合 の 書式 で す 。 
「*」 が 単独 で 使用 され て いる 場合 は 省略 で きま せん が 、 後 に 「 打 D 名 ] や 「. ク ラス 名 ] な ど 
が 続い て いる 場合 に は 、「*」 を 省略 する こと が で きま す 。 


ie 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN" 
"htEp : / /www .w3 . org/TR/htm14/1oose .dEtd"> 同 
<htm] 1ang="]a"> 
<head> 
<meta htEtp-equ1v="Content-Type" content= "ex 上 /htm] : 
charset=ShifFt JTS"> al 
<tit1e> すべ て の 要素 に 適用 させ る </t1t1e> 
<Sty1le ype="text/Css"> 
マリ ーー 
に 8 

font-size: medium: /* 文字 サイ ズ を 標準 に */ 

Font-weight: norma1: /* 文字 の 太 さ も 標準 に * ょ / 




















} 

ヒー トコ 

</ style> 

</head> 

<body> 

<h1> これ は h1 要素 の 内 容 で す 。</h1> 
<h2> これ は h2 要素 の 内 容 で す 。</h2> 
<h3> これ は h3 要素 の 内 容 で す 。 </h3> 
<h4> これ は 14 要素 の 内 容 で す 。 </h4> 
<h5> これ は h5 要素 の 内 容 で す 。</h5> 
<h6> これ は h6 要素 の 内 容 で す 。</h6> 
<p> これ は p 要 素 の 内 容 で す 。</p> 
</Dbody></htm]> 





ルン ルル くう の すま に % て っ) 


考 の 名 {一 1} 
< クラ ス 名 【 1 
要 東 名 級 の 名 {一 } 
要素 名 . ク ラス 名 { 一 } 










refox 
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生 0 や クラ ス を 描 定 し た 東寺 に 吉 用 させ る - Microsoft Interne 
アイ ル P) 編集 CE) 表示 W) お 気に入り ⑯ ウー ル D AMI ブ ⑱⑯ 


@ ま ・ の 回 回 の wm 支 5moo 
これ は hn1 要 素 の 内 容 で す 。 


これ は p 要 素 の 内 容 で す 。 


1D や クラ ス を 指定 し た 要素 に 連用 ぐせ る - Mozilla Frefox に し 1 O フ 
イル 四 業 6) 表示 和 動 ⑪ プッ 2Yー が 8) ウー ル D へ ルプ 3 AS 
っ RM 


ト E7C』 


これ は hl 要素 の 内 容 で す 。 


これ は p 要 素 の 内 容 で す 。 


在 5-mac 
左 4-mac 





これ は p 要 素 の 内 容 で す 。 


この p 要 径 に は 「d="myid"」 と 指定 し て いま す 。 


これ (は p 要 系 の 内 容 で す 。 


これ は p 要 素 の 内 容 で す 。 


| この p 要 系 に は id=*myid"」 と 指定 し て いま す 。 


これ は 要素 の 内 容 で す 。 


これ は p 要 素 の 内 容 で す 。 


これ は p 要 素 の 内 容 で す 。 





id 属性 や class 属性 で 特定 の 名 前 が 付け られ て いる 要素 を 対象 と し て 、 ス タイ ル を 適用 
させ た い 場 合 の 書式 で す 。 

「 抽 D 名 ] と 「. ク ラス 名 ] は 、 そ れ ぞ れ 「* 負 D 名 」 と 「*. ク ラス 名 」 の 省略 形 で 、 そ の ID 名 ま 
た は クラ ス 名 が 指定 され て いる すべ て の 要素 が 対象 と な り ま す 。「 要 素 名 氏 D 名 ] ま た 
は 「 要 素 名 . ク ラス 名 ] の よう に 指定 する と 、 そ の ID 名 また は クラ ス 名 が 指定 され て いる 
「 要 素 名 」 の 要素 だ けが 対象 と な り ま す 。 

id 属性 は 、 あ る 要素 に 対し て その HTML 文書 内 で の 固有 の 名 前 を 付け る も の で 、class 
属性 は その 要素 の 種類 名 や 分 類 名 を 表す も の で す 。 し た が っ て 、 ひ と つの HTML 文書 
内 で 同じ クラ ス 名 は 複数 箇所 に 指定 で きま す が 、ID 名 は 1 ヵ所 に し か 指定 で きま せん 
の で 、 注 意 し て くだ さい 。 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 2 


"httDp : / /www .w3 . org/TR/htm14/1oose .dtd"> 
<htm] 1ang="]a"> 


・wswsgso-+aa | 


<head> 

<meta htp-equ1iv="ConEent-Type" content="Eext/hEm] : 
charset=ShiEt_ JTS"> 内 
<tit1e>TD や クラ ス を 指定 し た 要素 に 適用 させ る </tit1e> 

<style type="text/cCss"> 


CRS を ams 193 



























/ refox 
Moz/a 
リル,6 
6.X 


マー ニ 
#myid { 
padding: 0.5em: 
border: outset 8px #FFO000 /* 赤い 枠 を 表示 */ 
} 
p・-myc1ass { 
padding: 0.3emz: 
co1or: #EFEFFf: /* 文字 色 を 白 に */ 
background: #EE6600 /* 背景 色 を オレ ンジ に */ 


ーー テ > 
</sty]e> 
</head> 
<body> 


<h1 c]ass="myclass "> これ は h1 要素 の 内 容 で す 。</h1> 

<p> これ は p 要 素 の 内 容 で す 。</p> 

<p class="myclass"> 

この p 要 素 に は 「c1ass="myc1ass"」 と 指定 し て いま す 。 </p> 

<p> これ は p 要 素 の 内 容 で す 。</p> 

<p 1d="my1d"> 

この p 要素 に は 「1d= "myiq"」 と 指定 し て いま す 。 </p> 
<p> これ は p 要 素 の 内 容 で す 。</p> 

<p class="myclas8"> 

この p 要 素 に は 「c1ass="myc1ass"」 と 指定 し て いま す 。</p> 

<p> これ は p 要 素 の 内 容 で す 。</p> 

</body> 
</htm1> 


層 選 人 
hu hl 
DID EN 
こい 4 トー】 


リン ク 部 分 に 適用 させ る 


要素 名 :link {-} へ ま だ 見 て いな い リ ンク 部 分 の スタ イル /E2.0 
要素 名 :visited {一 ] を すでに 見 た リン ク 部 分 の スタ イル ーー 
要 東 名 :hover {-} 
へ 征 カー ソル が その 要素 の 上 に ある 時 の スタ イル 

要素 名 :active {一 } 
へ 生 マ ウス ボタン を 押し た 時 の リン ク 部 分 の スタ イル LA4X 

※「 要 素 名 ] の 部 分 に は 、「 電 D 名 ] や 「. ク ラス 名 」 も 指定 で きま す 。 OperaZ 
Opera6 


Internet Explorer 6.0 






呈 リン カ 部 分 に 適用 さ 1 





リン ク に 関連 する スタ イル 


ケー ト を 利用 する と 、 一 部 の リン ク だ け 色 な どの スタ イ 
ル を 変え る こと が で きま す 。 「jink」 や 「yisitsd」 な ど は 「 角 似 クラ 
ス 」 と 呼ば れ て いま す 。 













スタ イル シ 








[次 ペー ジ ] トッ ゴ ] 前 ペ ー ジ ] OO ひ る RU 


リン ク 部 分 に 連用 させ る 
アイ ル 村人) 表示 物 重 @) プク マー が 8 ツー ル (① ヘル プ ⑪ 38 


を - ゆ 人 @@@ の owa 
リン ク に 関連 する スタ イル 


スタ イル シー ト を 利用 する と 、 一 部 の リン クタ だ け 色 な どの スタ イル を 
変え る こと が で きま す 。 「:link」 や 「:yisited」 な ど は 「 蜂 似 ク ラス 」 と 呼 
ば れ て いま す 。 









リン ク 部 分 に 対し て スタ イル を 適用 させ た い 場 合 の 書式 で す 。 
















ペー ジ ] [トッ プ ] [前 ペー ジ ] 


また //』 
圧 5-mac 


左 4-mac 


皇 
敵 
用 
す 
四 
を 
指 
定 
す 
る 















し た が っ て 、 通 常 は 「 要 素 名 ] の 部 分 は 「a」 に な り ま す 。「 要 素 名 」 の 部 分 に 「#D 名 」 や 「. 
クラ ス 名 | を 指定 する こと で 、 特 定 の リン ク 部 分 に 別 の スタ イル を 適用 させ る こと も で 


きま す 。 


これ ら 4 種 類 の 状態 の 指定 は 、 必 ず 「link [visited」「hover」「actve」 の 順に な る よう に し 


て くだ さい 。 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTMT, 4.01 0 


http : / /Www .W3 . org/TR/htm14/1oose .dtd"> 


<htm] 1ang="]a"> 
<head> 


ET 





且 7e7ox 
Moz 罰 a 
リル 
6.X 
4.X 





<meta http-equiv="Content-Type" Conten キ ="Eext /htm] : 了 
Charse=Sh1Ft JTS"> 

<tit1e> リン ク 部 分 に 適用 させ る </tit1e> 

<style type="Eext/css"> 

ニー 

/* 普通 の リン ク 色 の 設定 */ 

ai1ink ( color: #0000FF: background: #EFEFfF } 
asYigited { co]1or: #000080: background: #FEFEFF } 
aihover { Color: #FfF3300: background: #FFFFfFfF } 
aiactive { co]1or: #FE0000: background: #FFFFfFfF } 


/* 特定 の クラ ス が 指定 され て いる リン ク だ け 色 を 変え る */ 

a.specia] { font-weight: bo1d } 

a・8peota1:1ink { color: #00cc00: background: #FFEFfFf } 
a・8pecta1sYigited { co]or: #009900: background: #FFEFfFfF } 
a・.8pecta1 active { color: #00FFO0: background: #FFFEFfF } 


-navbar { 
text-a11gn: CenEer: 
border-toDp: So11qd 1px #999999: 
padding-top: 1em 

} 


/* 特定 の クラ ス に 含ま れ て いる リン ク だ け 色 を 変え る */ 

・navbar as1ink { co]or: #FF6600: background: #EFEFFF } 
・navbar avisited { Color: #FF9900: background: #FEFfFFfF } 
・navbar aiactive { color: #EEO0000: background: #EEEFFfF } 

に コー ンコ 

</ sty1e> 

</head> 

<body> 

<h1> リン ク に 関連 する スタ イル </h1> 

く D> 

<a href="css .htm1 "> スタ イル シー ト </a> を 利用 する と 、 一 部 の <a href="1ink. 
htm1"> リン ク </a> だ け 色 な どの スタ イル を 変え る こと が で きま す 。 「: 1ink」 や [:yisi 
tedJ」 な ど は 「<a href="pseudo .htm1" cl1ass="specia1 "> 疑似 クラス </a>」 と 呼 
ば れ て いま す 。 

< く /p> 

<p class="navbar"> 

[<a hrefF="next .htm1 "> 次 ペー ジ </a>] 

[<a hrefF="Eop.htm1 "> トッ プ </a>] 

[<a href="prev .htm1 "> 前 ペー ジ </a>] 

< く /p> 

</body> 

</ htm1> 


1 行 目 に 適用 させ る 
更 素 名:first-Hne [一] 


※「 要 素 名 ] の 部 分 に は 、「 提 名 ] や 「. ク ラス 名 」 も 指定 で きま す 。 _/ire7ox 
Moz/a 








Internet Explorer 6.0 RS] 
負 1 行 目 に 適用 と せる - Microsoft jnterm 


カイル) 編集 表示 ) お 気 に 入 D@ 


OR の 回 回 @ の w 


1 行 目 に 適用 させ る - Mozilla Firefox 


移動 ⑯ ブッ 2 マー の ⑧) ツール D ヘル プ ⑱ る 


今 だ け に スタ イル を 適用 させ る 疑似 要素 で す 。 セレ クタ に 


分 だ け に スタ イル を 適用 させ る 疑似 要素 で す 。 セレ クタ に (は いく 
つか 種類 が あり 、 基本 8 に は 任意 の 順序 で 組み 合わ せ て 使う 
こと が で きま す が 、 明 似 要素 に つい て は 必ず セレ クタ の 最後 の 
部 分 で 使用 し ます 。 


つが 種類 が あり 、 基本 的 に は 任意 の 順序 で 組み 合わ せ て 使う こ 
と が で きま す が 、 疑似 要素 に つい て は 必ず セレ クタ の 最後 の 部 
分 で 使用 し ます 。 





指定 し た プロ ッ ク レ ベル 要素 の 1 行 目 と し て 表示 され る 部 分 だ け に スタ イル を 適用 さ 
せ た い 場合 の 書式 で す 。 


| Samnlo 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTMIL, 4.01 Transitiona1 / /EN" 
"http : / /Www .w3 . org/TR/htm14/1oose .dtd"> 阿 

<htm] 1ang="]a"> 

<head> 

<meta http-equiv="Content-Type" content="text/htm] 
charset=Shift_ JTS"> 由 

<tit1e>1 行 目 に 適用 させ る </tit1e> 

<style type="text/CSsSs"> 

ぐ !)=ー 

p { 1ine-height: 1.6 } 

piEirst-1ine { 
color: #EFFFff: 
background: #EF6600 

} 


ーー> 


の っ ト 守 避 避 凌 湊 ct 衣 悦 M 


</ sty1e> 

</head> 

<body> 

く D> 

「: Eirst-1ine」 は 、 プ ロッ クレ ベル 要素 の 1 行 目 と し て 表示 され る 部 分 だ け に スタ イル を 適用 さ 
せる 疑似 要素 で す 。 セレ クタ に は いく つが 種類 が あり 、 基本 的 に は 任意 の 順序 で 組み 合わ せ て 使う 」 
こと が で きま す が 、 疑似 要素 に つい て は 必ず セレ クタ の 最後 の 部 分 で 使用 し ます 。 

< く /p> 

</body> 

</htm1> 














2 要素 名 : 「CSS を 適用 する 対象 ] の 「ID や クラ ス を 指定 し た 要素 に 適用 させ る 」 (P.193) 


Ceeem す 10 


LE を | に 3 っ) 


要 東 名 :fist-letter {一} 
※ [要素 名 ] の 部 分 に は 、[#I 名 」 や [クラ ス 名 」 も 指定 で きま す 。 


Ag8 
リル 


Internet Explorer 6.0 
1 文字 目 (に 適用 1 Microsoft Internet Explorer 
プア イル ⑥ 編集) 表示) お気 に 和 D⑳ ツ 


圏 人 の 東 


誌 な ど で 時 々 見 られ る よう に . スタ イル シー ト を 使用 し て 

先頭 の 1 文字 だ け に スタ イル を 適用 する こと が で きま 

す 。 Windows 版 の Intermet Explorerr は バー ジョ ン 55 か 
ら 、 Netscape は パー ジョ ン 6 か ら 対 応 し て いま す 。 ただし. 日 本 
語 部 分 に 対し て 適用 する と 、 Macintosh 版 Internst Explorer 50 
で は 文字 化け が 発生 する 場合 が あり ます の で 注意 し て くだ さ 
い 。 





9 いる 
1 娘 字 目 に 適用 ませ る - Mozilla Firefox 


アル 紅 集 ) 表示 G/ 移動 ⑬ プッ 2 マー2B ウ - ル OD AM プ ⑪ 計 
和 を ゆら 6pmeg _ 


誌 な ど で 時 々 見 られ る よう に 、 スタ イル シー ト を 使用 し て 先頭 

の 1 文字 だ け に スタ イル を 適用 する こと が で きま す 。 Windows 

版 の Internet Fxplorer は バー ジョ ン 5.5 か ら 、 Netscape は 
バー ジョ ン 6 か ら 対応 し て いま す 。 た だ し 、 日 本 語 部 分 に 対し て 適用 
する と 、 Macintosh 版 Internct Fxplorer 5.0 で は 文字 化け が 発生 す 
る 場合 が あり ます の で 注意 し て くだ さい 。 











利 定 し た プロ ッ ク レ ベル 要素 の 最初 の 1 文字 だ ぞ け に スタ イル を 適用 させ た い 場 合 の 書 
式 で す 。 


EYE 揚 放 エ 5 エエ ヤ エ ヤ ザ ヤ ザ ナ 】 ォ 】 ォ 】$ ふ べべ 


< く !DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN" 
"http : / /Www .W3 . org/TR/htm14/1oose .Qtd"> 隔 | 
<htm] ]1ang="]a"> 

<head> 

<meta http-equ1vY="Content-Type" conEtent="text/htm] : 
charset=Sh1fFt JTS"> 同 

<tit1e> 1 文字 目 に 適用 させ る </tit1e> 

<style type="text/css"> 

ニニ 























19 CS を 


p:Eirst-1etter { 
Font-gize: 3em: 
E1oat: 1eft: /* テキ スト を 回 り 込ま せる */ 
Font-weight: bo1d:  /* 文字 を 太く する */ 
co1or: #EF6600: /* 文字 色 を オレ ンジ に */ 
backqground: #EFEFFF 万 e7ox 
} oza 
3 リル 
</ sty1e> -A/ の 
</head> 
<body> 
<D> 
雑誌 な ど で 時 々 見 られ る よう に 、 スタ イル シー ト を 使用 し て 先頭 の 1 文字 だ け に スタ イル を 適用 す 
る こと が で きま す 。 Windows 版 の Tnternet Exp1orer は バー ジョ ン 5 .5 か ら 、 Netscape 
は バー ジョ ン 6 か ら 対 応 し て いま す 。 た だ し 、 日 本 語 部 分 に 対し て 適用 する と 、 Macintosh 版 
Tnternet Explorer 5.0 で は 文字 化け が 発生 する 場合 が あり ます の で 注意 し て くだ さい 。 
く /p> 
</body> 
</htm1> 












7e7ox 
Moza 
721 
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| M4X 


Ope/a/ 
Opera6 


Sa ね / 


話 5-mac 
話 4-mac 


= 
『 
3 
3 
す 
る 














に カコ ゴリ た まう コ 全 = を (た ま 価 に る に を -】 
要 表 名 要 東 名 {  } 9 前 
※「 要 素 名 」 の 部 分 に は 、「 電 D 名 ] や 「. ク ラス 名 」 も 指定 で きま す 。 





Internet Explorer 6.0 3 いる RI) 


EE3! と よ は 1 3: を 1 


これ は 747 愛 琴 の 内 容 で す 。 


これ は 陣 村 の 内 容 で す 。 これ は 関 計 * の 内 容 で す 。 





前 の 要素 の 中 に 含ま れる 後 の 要 素 に 対し て 、 ス タイ ル を 適用 させ た い 場 合 の 書式 で す 。 
要素 名 と 要素 名 の 間 は 、 半 角 ス ペー ス で 区 切り ます 。 


|Samplc 王 還 時 


< く <!DOCTYPE HTMTL PUBLTC "-//W3C//DTD HTML 4.01 SR 
"http : / /www .w3 . org/TR/htm14/1oose .dtd"> 
<htm] 1ang="]a"> 
<head> 
<meta htp-equiv="Content-Type" content="text /htm] : に 
charset=Sh1ifFt_ JTS"> 
<tit1e> 特定 の 要素 に 含ま れる 要素 に 適用 させ る </tit1e> 
<sty1e type="Eext/Css"> 
< ニー 
p em { 
co1or: #FFFFFf /* 文字 色 を 白 に */ 
background: #EF6600 /* 背景 色 を オレ ンジ に */ 
} 


ーー テ > 














</ sty1e> 

</head> 

<body> 

<h1> これ は <emxh1 要素 </em> の 内 容 で す 。</h1> 
<p> これ は <em>p 要素 </ em> の 内 容 で す 。</p> 

</ body> 

</htm1> 


(9 要素 名 : [CSS を 適用 する 対象 ]」 の 「ID や クラ ス を 指定 し た 要素 に 適用 させ る 」 (P.193) 


200 C9S を 半 用 する 





ITOi(d3D1 り (りり 
文字 色 を 折 定 する - Micro r 
アカ イル) 編集 表示 お 気 に 和 D⑯ ツール ① へ ルプ ⑬⑪ 


@ 呈 ・ の 回 回 の の 時 寄 5R2p 


存立 字 所 ( ます 


還 芝 字 色 に 「# ] を 指定 し て いま す 


還 文字 色 に 「*ESo0」 を 指定 し て 


color プロ パテ ィ は 、 文 字 の 色 ( 前 景色 ) を 指定 し ます 。 


文字 色 だ け を 指定 し て いる と 、 ユ ー ザ ー が 設定 画面 や 独自 の スタ イル シー ト で 背景 1 
を 指定 し て いる 場合 な ど に 、 文 字 が 読み に くく な っ て し まう 場合 が あり ます 。 そ の よ 
色 も 同時 に 指定 する よう に 


うな こと を 人 避け る た め に 、 文 字 色 を 指定 する 場合 に は 背景 
し て くだ きい 。 


EE 間 只 -- ーー 


【csS】 
.type1 ( 
co1or: 失 009999: 
jackground: #FFFFfF 
} 
.type2 { 
co1or: #ccoo00: 
jackground: #EFFFfFf 
} 
.type3 { 
co1or: #EF9900: 
background: #FFFfFff 
} 


【HTML】 


<p class="type1"> 較 文字 色 に 「#009999」 を 指定 し て いま す 。</p> 
<p class="type2"> 較 文字 色 に 「#cccc00」 を 指定 し て いま す 。</p> 
<p class="type3"> 較 文字 色 に 「#FF9900」 を 指定 し て いま す 。</p> 


(2 色 指 定 : [CSS に つい て 」 の 「 色 の 指定 方 法 ] (P.180) 
色 指 定 : 巻末 付録 「 カ ラー チャ ー ト 1 一 8] (巻末 ) 
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oz//ja 


Ope/a/ 
Opera6 
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話 4-mac 





lt 古 巧 テー ミコ 川 





ント を 指定 する 


司 還 
ト 。 以 
= に 】 


font-fammily: フォ ント 名 , フォ ント 名 , フォ ント 名 , … 





Fre7ox ー 本 ーー 
oza シ ォ シト 名 フォ ント ファ ミリ ー 名 


AZ.X フォ ント の 種類 (serif - sans-serif ・cursive・fantasy・monospace) 


Internet Explorer 6.0 





@・ の の の 誠 sm29 
femi-iamilv 
この 部 分 は 明 朝 体 に 設定 し て いま す 。 
この 部 分 は ゴシック 体 に 設定 し て いま す 。 


8 RTNNSRI 
Comic Sans 娘 5 






Sa7 ね が 





圧 5-mac 
放 mac 
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す 
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@- ゆ - 令 @ 9 所 
iomt-family 
この 部 分 は 明 朝 体 に 設定 し て いま す 。 

この 部 分 は ゴシック 体 に 設定 し て いま す 。 
Comic Sans 刀 5 








font-family プロ パテ ィ は 、 フ ォ ン ト 名 を 指定 し ます 。 

フォ ント 名 は ひと つ で も 指定 で きま す が 、「,」 で 区 切っ て 複数 指定 する こと が で きま す 。 
その 場合 は 、 よ り 先 ( 諾 ) に 指定 され て いる フォ ント で 、 ユ ー ザ ー の 環境 で 表示 可能 な 
も の が 採用 され ます 。 フ ォ ン ト 名 の 中 に スペ ー ス が 含ま れ て いる 場合 は 、 必 ず そ の 前 
後 を 「"| ま た は 「| で 囲う よう に し て くだ さい 。 ま た 、 フ ォ ン ト 名 と し て 、 フ ォ ン ト の 種 
類 を 表す キー ワー ド を 指定 する こと も で きま す 。 各 キー ワー ド は 、 そ れ ぞ れ 次 の よう 
な 種類 を 表し て いま す 。 


・serif 明 朝 系 ( 例 : Times New Roman.、 MS P 明 朝 ) 
・Sans-serif ゴシック 系 ( 例 : Helvetica, MS P ゴシック , Osaka) 

・ CUrSive 草書 体 ・ 筆 記 体 系 ( 例 : Caflisch Script, Adobe Poetica) 
・fantasy 装飾 的 な フォ ント ( 例 : Critter, Cottonwood) 


・monospace 等 幅 フ ォ ン ト ( 例 :MS ゴシック , Osaka- 等 幅 ) 











これ ら は 、 指 定 し た すべ て の フォ ント 名 が 有効 で な い 場 合 の 最終 的 な 指定 と し て 、 常 
に 指定 し て お いた ほう が よい で し ょ う 。 


ET 


【cSS】 

h1 { font-fFami1y: Tmpact, gans-SeriF } 

p { font-size: x-]arge } 

.min { Eont-family: "MS P 明 朝 ", 平 成 明 朝 , seriE } 

.gh { Eont-Eamily: "MS P ゴ シッ ク ",Osaka, sans-BeriF } 
.Com { font-Eami1y: "Comic Sans MS",8anS-Ser ユ F ]} 


OpeyaZ 


【HTML】 Opera6 
<h1>fFont-fFam11y</h1> 

<p class="min"> こ の 部 分 は 明 朝 体 に 設定 し て いま す 。</p> 

<p class="gth"> この 部 分 は ゴシック 体 に 設定 し て いま す 。</p> 
<p class="com">Comic SanS MS</p> 


Sa ね / 
左 5-ax 
/E4-mar 





フォ ント ファ ミリ ー と は ? 

Windows を 使用 し て いる 方 で おれ ば 、「Times New Homan] と いう フォ ント 
の 名 前 を 目 に し た こと が ある と 思い ます 。 こ の フォ ント に は 、 元 と な る ひと つの フォ 
ント し か な いわ け で は な く 、 太 字 用 に デザ イン され た 「Times New Homan Bold]、 
イタ リッ ク 用 に デザ イン され た 「Times New Homan Italic]、 太 字 の イタ リッ ク 


と し て デザ イン され た 「Times New Homan Bold Italic] と いう 別々 の フォ ント が 
用 意 さ れ て いま す 。 フ ォ ン ト は 計算 に よっ て 太く し た り 斜 め に し た りす る こと も で 
きま す が 、 あ ら か じ め 専 用 に デザ イン し た フォ ント を 用 意 し て お く こ と で 、 よ ぼり 美 
し い 表 示 や 印刷 が 可能 に な る わけ で す 。 

この よう に 、 同 じ 種 類 で あり な が ら 別 々 の スタ イル 専用 に デザ イン され た フォ ン 
ト を 、 ま と め て 「 フ ォ ン ト フ ァ ミ リー」 と 呼ん で いま す 。 上 記 の 例 で は 「Times New 
Homan] が フォ ント ファ ミリ ー 名 と いう こと に な り ま す 。 





フォ ント サイ ズ を 指定 する 





万 re7ox 
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AZX 
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= 
1 
電 
2 
ト 
8 
7. 





font-size: サイ ズ 


サイ ズ 単位 付き の 数 値 ・%・smaller ・larger 
xx-Small ・x-small ・small ・medium ・ Iarge ・x-large ・Xx-large 


Internet Explorer 6.0 


当 フォ ント サイ ズ を 指定 する 





この 文字 の サイ ズ が 、 初期 値 (msdiuwm) で す 。 


1 いる 





て ーー の メチ 
mi の 文字 
* small の 文字 
















リ ォ ント サイ ズ を 指定 する 
アイ ル (⑥ 罰 業 ) 表示 移 和 ⑪ プッ 2 マー の 0 


やゆ - 全 GO@ の om 


この 文字 の サイ ズ が 、 初期 値 (medium) で す 。 















s medium の 文字 
・ laras の 文字 
・x-large の 文字 


.xx-large の 文字 


ッ - ル ① 1 















・ me o 玉 本 
me 0 文字 
















ここ は smaler、 こ こ は medium、 こ こ は larger。 ・ aal の 文字 
* medium の 文字 
ここ | は 9 ポイ ルト 、 こ こ は 12 ボ ポイ ント 、 こ こ は 16 ポ イン ト 。 * largs の 文字 





sx-large の 文字 
esxx-large の 文字 


ここ は mlr、 こ こ は medium、 こ こ は laraer。 





こ =ssox、 ここ は 10o%、 こ こ は 120%、 こ こ は 150%。 


は wt イ ト 、 こ こ は 12 ポ イン ト 、 ここ は 16 ボ ポイント 。 


ェ cusox、 ここ は 100%、 こ こ は 120%、 ここ は 150%. 


font-sizz プロ パテ ィ は 、 フ ォ ン ト の サイ ズ を 指定 し ます 。 

% で 指定 し た 場合 は 、 指 定 し た 要素 の 親 で ある 要素 の フォ ント サイ ズ に 対す る 割合 に 
な り ま す 。 ま た 、 キ ー ワ ー ド を 利用 する こと に よっ て 、「xx-smalll か ら 「xx-large」 ま で 
の 7 段階 の サイ ズ を 表現 する こと が で きま す 。 こ の 場合 、「medium」 が 標準 の サイ ズ で 
す 。「smaller」 と 「]arger」 は 、 親 要素 の フォ ント サイ ズ に 対し て 、 そ れ ぞ れ 1 邊 階 小 さい 
サイ ズ と 1 段階 大 きい サイ ズ に 設定 し ます 。 な お 、Windows 版 の mtemet Explorer 5.5 
まで と Imternet Explorer 6.0 の 互換 モー ド 、Macintosh 版 の Internet Explorer 4.X と 
Netscape Navigator 4.X で は 、「small」 が 標準 の サイ ズ に な っ て いま す の で 、 注 意 し て く 
だ さい 。 


EE 欄 語 uu エエ ヤキ ヤキ WOW リム リク ウー リー0{ 


【cSS] 

.XxS { Eont-size: xxx-Sma11 } 
-xS  { Eont-gize: XX-8ma11 } 
.S { Eont-size: Sma11] } 


204 略語 


-m { Eont-size: medium } 
a 由 { Eont-size: 1arge } 
-x] {| Eont-size: x-1arge } 
.xx] { Font-gize: xcr-1arge } 
-Smaller { font-size: sma11er } 
-1arger  { Eont-size: 1arger } 太 re7ox 
.809 { Eont-size: 9pt } Moz/a 
-S12 { Eont-gize: 12pt } 
-S16 ( font-size: 16pt } 
.p080 { Eont-size: 80% } 
.-p120 { Eont-size: 120% } 
-p150 ({ font-size: 150% } 
em { 
color: #FF3300: 
background-co]or: #EFFFFf : 
Font-sty1e: normal /E5-a 
} /E4-mac 


【HTML】 

<p> この 文字 の サイ ズ が 、<emx> 初期 値 (medium) </ em> で す 。</p> 
<u1> 

<11 c1ass="xx8"><em>xx-Smal11</em> の 文字 </11> 

<11 c1ass="xs"><em>x-Sma11</em> の 文字 </11> 

<11 class="s"><em>Sma11</em> の 文字 </11> 

<11 class="m"><em>medium</em> の 文字 </11> 

<11 class="1"><em>1arge</em> の 文字 </11> 

<11 c1ass="x1"><em>x-1argde</em> の 文字 </11> 

<11 class="xx1 "><em>xx-1arge</em> の 文字 </11> 

< く /u1> 

<D> 

<span class="smaller"> こ ご ここ は <em>sma11er</em></ span> 、 
<span class="m"> こ こ は <em>medium</em></ span> 、 
<span class="1arger"> こ ご ここ は <em> 1argder</ em></ SDan>。 
< く /Dp> 

<D> 

<span class="s09"> ここ は <em>9 ポイ ント </em></ span> 、 
<span class="s12"> こ ご こ は <em>12 ポイ ント </em></ span> 、 
<span class="s16"> ここ は <em>16 ポイ ント </em></ span>。 
</p> 

<D> 

<span class="p080"> ここ は <em>80 も </ em></ span> 、 

ここ は <em> 100%</ em> 、 

<span class="p120"> ここ は <em>120 も </em></ span> 、 
<span class="p150"> ここ は <em>150 も </em></ Span>。 

< く /D> 





フォ ント の 太 さ を 指定 する 





太 さ normal ・ bold ・ lighter ・bolder 
100 ・200 ・300 ・400 ・500 ・600 ・700 ・800 ・900 





Opeya/ GO ゃ の 還 F の の 暫 2 
・ tont-weight: normal 
・font-weight: bold 
・font-weight: 400 
・font-weight: 300 
・font-weight: 600 
・font-weight: 700 
・font-weight: 800 
・font-weight: 900 


Ope/ya6 
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/ お 4 ミリ アマ きる すま Mozilla Fmrefox 
プイ ル (E) 編集 表示 移動 ⑬ ブッ クマ ー ク 2) ツー ル ① 人 ルプ ⑪ 等 


年 ゆ - 依 G の omw 過 














* font-weight: normal 
* font-weight: bold 
*font-weight: 400 

* font-weight: 300 

* font-weight: 600 

* font-weight: 700 
*font-weight: S00 
* font-weight: 900 










font-weight プロ パテ ィ は 、 フ ォ ン ト の 太 さ を 指定 し ます 。 
「bold」 を 指定 する と 一 般 的 な 太字 に な り ま す 。 同じ フォ ント ファ ミリ ー 中 に 異な る 太 
さ の フォ ント が ある 場合 、「tighter」 は 1 段階 細い フォ ント に 、「bolder」 は 1 段階 太い フォ 
ント に 設定 され ます 。 ま た 、 太 さき は 100 一 900 の 数 値 で 指定 する こと も で きま す 。 こ 
の 場合 、 標 準 の 太 き 「normall は 400 で 、「bold」 は 700 に 相当 し ます 。 
| Sample 還 還 還 間 間 間 間 間 間 Fame 
【cSS】 
GS 3 

Font-S1ze: xx-]1arQG: 


font-fami1y: "Times New Roman", Times, seriF 
} 


2 較 軸 

















#bo1d Font-weight: bo1d )} 


{ 
#w400 { font-weight: 400 } 
#w500 { Eont-weight: 500 } 
#w600 { Eont-weight: 600 }) 
#w700 { Eont-weight: 700 } 
#w800 ( Eont-weight: 800 )} 
{ } 


#w900 

em { 
color: #FF3300: 
bacikkground-Co1or: #FFfFffF: 
font-style: norma1 


font-weight: 900 


} OpeyaZ 
Ope/a6 
【HTML】 


ET Sa ね // 


<11>fFont-weight: <em>norma]</em></11> た 5-ma 


<11 1qd="bo1d">Eont-weigqht: <em>bo1d</em></]1> /E2-mac 
<11 1d="w400">fFont-we1ght: <em>400</em></1i> 
<11 1d="w500">fFont-weight: <em>500</em></11> 
<11 1d="w600">Eont-weight: <em>600</em></11> 
<11 1d="w700">Eont-weight: <em>700</em></11i> 
<11 1d="w800">fFont-weight: <em>800</em></11> 
<11 1d="W900">fFont-weight: <em>900</em></1i> 
く /u1> 









フォ ント サイ ズ は 相対 的 な 単位 で 指定 する 

ブラ ウザ の 種類 や その 設定 に ちよ り ま す が 、 フ ォ ン ト サ イ ズ の 指定 に 「pt」 や 「px] 
な どの 単位 を 使う と 、 ユ ー ザ ー 側 で 文字 の 大 き さ を 変更 する こと が で き な く な る 場 
合 が あり ます 。 こ れ は 逆 に 言え ば 、 フ ォ ン ト サ イ ズ を 固定 し た つも り で いて も 、 環 
境 に よっ て は 大 き さ が 変更 され る 場合 も わ る と いう こと で す 。 

し た が っ て 、 フ ォ ン ト サ イ ズ の 指定 に 「pt] や 「px] な どの 単位 を 使っ て も 必ず し 
も その 大 き さ で 表示 され る と は 限ら な いし 、 も し 表示 サイ ズ が 固定 され た と し て も 、 
それ は ユー ザー か ら 「 必 要 に 応じ て 文字 の 大 き さ を 変更 する 」 機能 を 奪っ て し まう こ 
と に な り ま す 。 フ ォ ン ト サ イ ズ を 指定 する 場合 に は 、 で きる だ け 「em (その 部 分 の | 
本 来 の フォ ント サイ ズ を 1 と する 単位 )] や 「9%%」 な どの 相対 的 な 単位 を 使っ て 、 必 要 
に 応じ て 文字 の 大 き さ を 変更 で きる よう に し て お きま し ょ う 。 
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フォ ント スタ イル を 指定 する 





font-style: 対価 
text-decoration: 半 筋 

斜体 normal ・italic ・oDlique 

装飾 none ・underline ・overline ・ line-through ・ blink 


Internet Explorer 6.0 






午 フォ ント スタ イル を 指定 する - Microsoft Internet Explorer | 阿 


アイ ル ) 編集) 表示 お気 に 入 D⑱ ツー ル ①D へ ルプ ⑧ 
@・ の 回 還 の の 時 宮 5R9 


font-style: normal 


















9 ひる 






/677 た ye: 727 が 


フォ ント スタ イル を 指定 する - Mozilla Firefox 問 | に し 1 
on 


プア イル ⑥) 編集 ) 表示 移動 ⑯ ブックマーク ウー ル ① AU プ ⑪ 給 


息 - 只 - 情 @@ ぬ oe 名 








6 が 7e: o の 777e 










text-decoration: nione 






font-style: normal 












text-decoration: underlime 


text-decoration: overlime 









7677-s が 7e: 7 の 7 が c 







プ 677-y が eo の 7 の de 






text-decoration: nome 








text-decoration: underlime overlme 












text-decoraton: mderline 


text-decoraton: overlime 








text-decoraton: nmderlime overline 


font-style プロ パテ イィ は フォ ント を 斜体 に する か どう か を 、text-decoration プロ パテ イィ は 
フォ ント の 装飾 を 指定 し ます 。 

ここ で いう 「italic] と は 、 通 常 の 文字 より も 続け 書き に 近い 草書 体 風 に デザ イン され た 
斜体 の フォ ント を 指し ます 。「oblique」 と は 、 標 準 の フォ ント を 単純 に 斜め に し た も の 
で す 。 一 般 的 な 環境 で は 、「italic] も 「oblique」 も 同じ よう に 斜体 で 表示 され ます 。 
[nnderline」「oyerline」[line-through」 は 、 そ れ ぞ れ 文 字 に 対し て 「 下 線 」「 上線] 取消 線 ] を 
付け 、「blink」 は 文字 を 点 減 き せま す 。 こ れ ら の 値 は 、 半 角 ス ペー ス で 区 切っ て 複数 同 
時 に 指定 する こと も で きま す 。 

斜体 を 標準 に 戻す た め に は font-style プロ パテ ィ に 「normall を 、 装 飾 を な くす る た め に 
は text-decoration プロ パテ ィ に [none」 を 指定 し ます 。 


208 フォ ント 


ーー トト ーー ュー 


【cSS】 
p 【 
Font-s1ze: x-]ardG: 
font-fami1y: "Times New Roman", Times, seriFE refox 
Moz//a 
#1t1o { Eont-sty1e: ita1io } 7 が ? 
#ob1q { font-sty1e: ob1ique } 6X 
#ud1n { text-decoration: under1ine } ー 
#1nth { texxt-decoration: 11ne-Ehrough ) A4X 
#ov1n ( text-decoration: over1ine )} 
#udov ( text-decoration: under1ine over1ine } 
-keywd ({ 
co]1or: #FF3300: Sa ね / 
background-Co]or: #FFfFfFff 圧 5-ma 
} 夏 4-ax 
【HTML】 
<D> 
font-style: <span cl1ass="keywd">normal</ span> 
< く /p> 


さく B 3G ニ NbETLoP> 

font-style: <span cl1ass="keywd">1ta] 1c</ span> 

< く /p> 

<Dp 1d="ob1q"> 

font-sty1e: <span cl1ass="jkeywd">ob]1 ique</ span> 

< く /p> 

く Dp> 

text-decoration: <span class="keywd">none</ Span> 

< く /p> 

<p 1d="ud1n"> 

text-decorat1on: <span Class="jkeywd">under] 1ne</ span> 
く /p> 

<Dp 1d="1nth"> 

text-decoration: <span class="jkeywd">11ne-through</ span> 
く /p> 

<Dp 1d="ov1n"> 

text-decoration: <span cl1ass="keywd">over1 ine</span> 
</p> 

<D 1d="udov"> 

text-decoration: <span cl]ass="keywd">under]ine Over]1 ime</ Span> 
</p> 
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0 語 





と ん た ルキ ゴン k4 ユル) 





font: 氷 休 大 さ サイ ズ / 行 雇 フォ ント 名 


綱 体 font-style (P.208) で 指定 で きる 値 

太 さ font-weight (P.206) で 指定 で きる 値 

サイ ズ font-size (P.204) で 指定 で きる 値 (省略 不可 ) 

行間 line-height (P.218) で 指定 で きる 値 ( 値 の 前 に 「/] が 必要 ) 


フォ ント 名 font-family (P.208) で 指定 で きる 値 (省略 不可 ) 


Internet Explorer 6.0 
強 フォ ント 困 係 を まとめ て 指定 する - Microsoft Internet Explo 
アイ ル (E) 編集 (E) 表示 ) お 気 に 入 D⑯ ウー ル ① ヘル プ ⑱ 


Os の 回 還 の の we 去 mmco 





9 つい るり 
フォ ント 関係 を まとめ て 指定 する - Mozilla Firefox 
プイ ル (P) 編集 E) 表示 移動 ⑯⑬ 


ゅ - 雪 G 人 ぬ omw 加 





font プロ パテ ィ で 、 フ ォ ン ト 関 連 の プロ パテ ィ の 値 を まとめ て 指定 し ます 。 

サイ ズ と 行間 の 間 は 「/| で 区 切り ます が 、 そ れ 以 外 の 値 は 半角 スペ ー ス で 区 切っ て くだ 
さい 。 ま た 、 値 は 基本 的 に 上 に 示し た 順序 で 指定 し ます が 、 サ イズ と フォ ント 名 以外 
は 省略 する こと が で きま す 。 


【cSS】 
body { 
margin: 0: 
Co1or: #FfFF 和 ff: 
background: #009900 ur1 (back.]pg) 
} 
1 2 
text-a]ign: Center : 
margin: 0 
} 
bb 
Font: ita1io bo1d 6em "mimes New Roman",Timeg, eri 
} 
h2 { 
Font: 1.5em Aria] , san5-5@ ェ ふ : 
Co1or: #FF9900: 
background: transparen 上 


p 【 
font: 12pt/200% "MS P 明 朝 ", 平 成 明 朝 , serif: 
margin: 1em 2em: 
padding: 1em: 
Co1or: #EFFFFf: 
jbackground: #000000 


【HTML】 

<h1>-fFont-</h1> 

<h2>[ shorthand font property ] </h2> 
< く D> 


この プロ パテ ィ を 利用 する と 、 フ ォ ン ト に 関連 する 複数 の ブロ パテ ィ を 一 度 に 設定 する こと が で き 


ます 。 
</p> 
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Hine-height: 行 の 高 さ 


行 の 高 さ normal 


アイ ル (P) 編集 ⑤ お 気 に 和 D ツー- ル CD へ M プ ⑪ 


G や ・ の 回 四 の の 昌吉 5m 
行間 の 設定 


line-height: normal 


行 の 高 さ は 文章 の 読み や すさ に 影響 し ます 。 狭 す ぎ て も 広 す 

て も 読み に くく な り ま す 。 行 数 が 少な い 場 合 は 行間 が 少な く で 
比較 8 的 読み や すく 、 1 行 の 文字 数 が 多い 場合 は 行間 が 狭い と 
か な り 読 み に く く な り ます 。 


line-height: 1.5 


行 の っ 高 さ は 文章 の 読み や すさ に 影響 し ます 。 狂 すぎ て も 広 す ぎ 
て も 読み に くく な り ま す 。 行 数 が 少な い 場 合 は 行間 が 少な く て も 
比較 9 読み や す <、 1 行 の 文字 数 が 多い 場合 は 行間 が 損 い と 
か な り 読 み に く く な り ま す 。 





line-height: 180% 


行 の 高 さ は 文章 の 読み や すさ に 影響 しま す 。 狭 すぎ て も 広 す ぎ 

て も 読み に くく な り ま す 。 行 数 が 少な い 場 合 は 行間 が 少な < て も 
比較 89 読 みや すく 、 1 行 の 文字 数 が 多い 場合 は 行間 が 名 いと 
か な り 読み に くく な り ま す 。 





line-height プロ パテ ィ は 、 行 の 高き 
単位 を 付け な 


の な いこ と に 





・ 数 値 ・ 単 位 付 き の 数 値 ・% 


191r っ (ひる 


の 多 箇 9 「225-2 の GS AZ 上 5 ね 


line-height: normal 
行 の 高 さ は 文章 の 読み や すさ に 影響 し ます 。 狼 す ぎ て も 広 広 すぎ て も 
こく く な り ます 。 行 数 が 少な い 場 合 は 行間 が 少な く て も 比較 的 
1 行 の 文字 数 が 多い 場合 は 行間 が 狭い た か な り 読 み に 
line-height: 1.5 


行 の 高 さ は 文 意 の 読み や すさ に 影響 し ます 。 狂 す ぎ て も 広 す ぎ て も 
〈 な り ます 。 行 数 が 少な い 場 合 は 行間 が 少な く で も 比較 的 
1 行 の 文字 数 が 多い 場合 は 行間 が 歌い ょ か な り 読み に 


line-height- 180% 





行 の 高 さ は 文章 の 読み や すさ に 影響 し ます 。 狂 す ぎ て も 広 す ぎ て も 
読み に くく な り ます 。 行 数 が 少な い 場合 は 行間 が 少な く て も 比較 的 
読み や すく 、 1 行 の 文字 数 が 多い 場合 は 行間 が 狂い と か な り 読み に 
くく な り ま す 。 








を 設定 し ます 。 

ょ いで 数 値 だ け を 指定 し た 場合 は 、 フ ォ ン 
に 設定 され ます 。 9 ほぼ も 、 フ ォ ン ト サ イ ズ に 対す る 割合 に な 
な っ て いま す の で 、 注 意 し て くだ さい 。 


ト サ イ ズ に その 値 を 掛け た 高き 
な り ま す 。 マ イナ 


ETTT 提 呈 ーーーーーー ーー 


【cSS】 


#sample1 { 1ine-height: norma1 } 


#sample2 { 1ine-height: 1.5 } 
#samp1e3 { 1ine-height: 180% } 
em { 
color: #FfF3300: 
backqround-Co1or : 
Font-sty1e: norma1 


#EFFFff: 



















【HTML】 
<h1> 行間 の 設定 </h1> 


<h2>1ine-height: <em>norma]</em></h2> 2 
<p 1d="samp1e1 "> 

行 の 高 さ は 文章 の 読み や すさ に 影響 し ます 。 狭 すぎ て も 広 す ぎ て も 読み に くく な り ま す 。 行 数 が 少 re7ox 
な い 場 合 は 行間 が 少な く て も 比較 的 読み や すく 、1 行 の 文字 数 が 多い 場合 は 行間 が 狭い と か な | ん / の 2/ た 


み に く く な り ま す 。 リリ リル 
<py 
<h2>1ine-height : <em>1 .5</em></h2> LM4X 


<D 1d="samp1e2"> 人 
行 の 高 さ は 文章 の 読み や すさ に 影響 し ます 。 狭 すぎ て も 広 す ぎ て も 読み に くく な り ま す 。 行 数 が 少 0pea7 
な い 場 合 は 行間 が 少な く て も 比較 的 読み や すぐ 、 1 DX いい と か な り 二 | Ope/a6 
の み に く く な り ま す 。 

< く /p> 

<h2>11ine-height: <em>180$</em></h2> 
<Dp 1d="samp1e3"> / だ 4-m 


行 の 高 さ は 文章 の 読み や すさ に 影響 し ます 。 狭 すぎ て も 広 す ぎ て も 読み に くく な り ま す 。 em | 


と) 
圧 5-m 


な い 場 合 は 行間 が 少な く て も 比較 的 読み や すぐ 、 1 行 の 文字 数 が 多い 場合 は 行間 が 狭い と か な り 読 
み に く く な り ま す 。 


< く /p> 








line-height プロ パテ ィ の バグ に 注意 ! 

Internet Explorer 3X や Netscape Navigator 4.X に は 、Iline-height プロ パ 
ティ に 関す る バグ が た くさ ん あり ます 。 た と えば 、Internet Explorer 3.X の 場合 
は 単位 を 付け な い 数 値 を 指定 する と ピク セル 数 と し て 認識 され ます し 、Netscape 
Navigator 4X で は 絶対 的 な 単位 を 指定 し て いる と 印刷 で 問題 が 発生 する 場合 も あ 
り ま す 。 

中 で も 特に 注意 する 必要 が ある の が 、Netscape Navigator 4.X で は Iine-height 
を 指定 し た 範囲 に 画像 が 含ま れ て いる と 、 テ キス ト の 上 に 画像 が 重なっ て 表示 され 
る と いう バグ で す 。Netscape Navigator 4.X の ユー ザー か ら 「 文 字 の 上 に 画像 が 
重なっ て 読め な い 」 と いう 苦情 が 来 た ら 、 ま ず は Iine-height を 疑っ て み ま し ょ う 。 













fefox 
MMozi/a 
























行 揃え を 指定 する 


写 


イル) 編集 E) 


@・ の 


text-align: lt text-align: left 


text-align: center text-align: center 


text-align: ri 本 t 
text-align: right 


text-align プロ パテ ィ は 、 行 揃え を 設定 し ます 。 

[leftllrightl「center」 は 、 そ れ ぞ れ 「 左 揃え 」「 右 揃え 」「 中 央 揃え ] を 表し て いま す 。 こ の 
プロ パテ ィ は 、 プ ロック レ ベル 要素 に 対し て 指定 し て 、 そ の 内 容 の 行 揃え を 設定 する 
も の で す 。 プ ロッ クレ ベル 要素 の ボッ クス 自体 を モ セン タリ ング し た い 場 合 に は 、 左 右 
の マー ジン を 「auto」 に 設定 し て くだ さい 。 


5 ーーーーー…ーーーー 


【cSS】 
p ( font-size: x-1arge } 
#sample] { text-a1ign: 1eft } 
#sample2 { text-a1ign: center } 
#samp1e3 { text-a1ign: right } 
em { 

Font-sty]e: norma]: 

color: #EF3300: 

background-color: #EFEFFF 


【HTML】 

<Dp 1d="sample1">text-a1iqn: <em>1ef</em></D> 
<D 1d="sample2">text-a11gn: <em>Cener</ em> く /D> 
<p 1d="sample3">text-a]iqgn: <em> エ iqht</ em></p> 








縦 方 向 の 位置 を 指定 する 
Vertical- 


align: 縦 方 向 の 分 諸 
top 上 を その 行 の 上 に 合わ せる 
middle 中 心 を その 行 の 「 ベ バース ライ ン + 小文字 x の 半分 の 高 さ ] に 合わ せる 
bottom 下 を その 行 の 下 に 合わ せる 
baseline ベー スラ イン を その 行 の ベー スラ イン に 合わ せる (初期 値 ) 
text-top 上 を その 行 の フォ ント の 上 に 合わ せる 
text-bottom 下 を その 行 の フォ ント の 下 に 合わ せる 
SUper ベー スラ イン を その 行 の 上 付き 文字 の 位置 に 合わ せる 
Sub ベー スラ イン を その 行 の 下 付き 文字 の 位置 に 合わ せる 
単位 付き の 数 佳 その 行 の バー スラ イン を 0 と し た 値 の +- 
9% その 行 の ベー スラ イン を 0 と し た 行 の 高 さ に 対す る 割合 






Internet Explorer 6.0 
委 論 方 向 
プイ ル (E) 編集 (D 


GO ・ の 6 回 同人 @ 


vertica-align 起 middle 
【3 
vertica-align bottom 


top 


















bottom 


vertical-alisn プロ パテ ィ は 、 指 定 さ れ た イン ライ ン 要 素 が 表示 され る 行 の 中 で の 、 縦 方 
向 の 位置 を 指定 し ます 。 

この プロ パテ ィ は 行 全体 の 縦 の 位置 捕え を 指定 する も の で は な く 、 指 定 さ れ た イン ラ 
イン 要素 を 、 そ の 行 の 中 で 縦 方 向 の どの 位置 に 配置 する か を 指定 する も の で す 。 

な お 、 こ の プロ パテ ィ を th 要素 また は td 要素 に 指定 し た 場合 に は 、「top」「midqdle」 
「bottom」 は 、 そ れ ぞ れ セ ル 内 の 「 上 中心]「 下 ] に 揃え られ 、「baseline」 を 指定 し た 場合 
に は セル 内 の 最初 の 行 の ベー スラ イン が 揃え られ ます 。 
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【cSS】 
-Vtop { vertica1-a1ign: top } 
-Vmid { vertica1-a1ign: midd1e } 
・Vbtm { vertica1-a1ign: bottom ) 
em { 
font-sty1e: normal: 
Font-weight: bo1d: 
color: #FF6600: 
background: #FFFFfFfF モ 
} 
td { 
Width: 6em: 
height: 6em: 
text-a]ign: center 


【HTML】 

く D> 

Vertica1 -a11gn : 

<1mg class="vm1d" sro="1eaf .gif" width="80" height="80" a1t=""> 
<em>midd]e</ em> 

< く /p> 

く D> 

vertica1 -a11gn : 

<1mg src="1eaf .g1iF" width="80" height="80" a1t=""> 
<em class="VEop">top</ em> 

<em class= "vbtm">Dottom</ em> 

</p> 


<tab1e border="3"> 

< ヒエ > 

<td class="Vtop "><em> 上 OD</ em></ 上 d> 
<td cl1ass="Vm1d"><em>m1dd1e</ em></d> 
<td class= "vbtm"><em>botEom</ em></d> 
< く / 上 エッ > 

</tab1e> 





明 


文字 間隔 ・ 単 語 間隔 を 設定 する 


1etter-spacing: 文字 千 大 
Word-SDacimg: 単語 半 大 


文字 間隔 ・ 単語 間隔 normal ・ 単 位 付 き の 数 値 


Internet Explorer 6.0 


重文 字 周 司 - 単語 半 で 
プア イル (E) 編集 じ 表示 ) お 気 に 和 DD 


@ 記 ・ の 回 国人 の ws 訓 bm 
文字 間隔 と 単語 間隔 


田 letter-spacing 












dd いる 







letter-spacing: normal 文字 剛司 ・ 単語 間 | る - Mozilla Firefox 
プア イル (E) 編集 GE) 表示 移動 ⑬⑯ ブッ 2 マー5⑧) 


|e-*-@O の om 
文字 間 曲 と 単語 間隔 


田 letter-spacing 





letter-spacing: 0.5em 
文字 間隔 : 1 em 


文 字 問 隔 | 2 0 e mm 
















較 word-spacing 












It specifies spacing behavior between words 
letter-spacing: normal 





It specifies spacing behavior between word ヨ 






1etter-spaclng: 0.5emp 
文字 間隔 : 1 em 
字 間隔 : 2 












between 





It specifies spacing behavior 
















還 word-spacing 


It specifles spacing behavior between words. 





It speciRes spacing behavior between words. 





It 





specifes spacing behavior between words. 


letter-spacing プロ パテ ィ は 文字 と 文字 の 間隔 を 、word-spacing プロ パテ ィ は 単語 と 単語 
の 間隔 を 設定 し ます 。 
数 値 を 指定 し た 場合 は 、 標 準 の 値 に 対し て プラ ス さ れ ま す ( マ イナ ス も 可 )。 


| Samplc 王 還 還 


【csS】 

-Sample1 ( 1etter-spacing: 0.5em } 
-Sample2 { 1etter-spacing: 1em } 
.Sample3 { 1etter-spaoing: 2em } 
-Sample4 { word-spacing: 0.8em } 
.Sample5 { word-spacing: 1.5em } 
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_cc0 


Font-sty1e: norma]: 
Font-we1ght: bo1d: 
co]or: #FF6600: 
background: #FFFFFFE 
Jrefox } 

Moz 放 a 

【HTML】 

<h1> 文字 間隔 と 単 話 間隔 </h1> 





<h2> 圏 1etter-spacing</h2> 
<p>1etter-sSpacinq: <em>norma]</em></D> 















Opeya6 <Dp clasg="sample1 ">1etter-sSpacing: <em>0 .5em</em></p> 
<p class="sampl1e2"> 文 字 間 隔 : <em>1em</em></p> 


97977 <p class="samp1e3"> 文字 間隔 : <em>2em</em></p> 


圧 5-m 


ma <h2> 較 word-spacing</h2> 


<p>It speoifFies spacing behavior between Words .</p> 

<p class="sample4">Tt speoifies spacing behavior beEtween words .</p> 
<p class="sample5">Tt specifies spacing behavior between words .</D> 
く /p> 





単語 の 放 中 に スペ ー ス を 入れ て は いけ な い ? 
ワー ブロ な どの 文書 で は 、「 日 時 ]「 場 所 ] の よう に ひと つの 単語 の 途中 に 全角 
スペ ー ス を 入れ て 表示 幅 を 調整 する て と が あり ます 。 し か し 、 ホ ー ム ペー ジ で 同様 
の こと を 行う と 、 音 声 ブ ラウ ザ で は 正しく 読み 上 げ ら れ な く な る 可能 性 が 高く な り _ 
ます 。 た と えば 、IBM の ホー ムペ ー ジ ・ リ ー ダ ー の 場合 は 、「 日 時 ] は 「 ひ ・ と き 」、 
「 場 所 は 「 ば ・ と ころ 」 の よう に 読み 上 げ ら れ て し まい ます 。 単語 の 途中 に スペ ー 
ス を 入れ る と 、 ペ ー ジ 内 の テキ スト を 検索 する 場合 な ど に も 不都合 が 生じ ます の で 、 
文字 の 間隔 を 空け た い 場合 に は スタ イル シー ト で 調整 する よう に し まし ょ う 。 








hCGritdtt り 【UrduWU 


詩 1 行 目 の イン テン ト を 設定 する 
アイ ル (E) 編集 上 表示 | 


まま の 図 較 人 の の 中 3 


っ 


これ は イン デン ト 「0 (初期 値 )」 の 状態 で す 。 


これ が 「1sm」 だ け イ ン デ ント され た 状態 で す 。1 行 目 の 開始 
位置 を 、 指定 し た 距離 だ け 右 に 移動 させ ます 。 


これ が 「3em」 だ け イ ン デ ント され た 状態 で す 。1 行 目 の 
開始 位置 を 、 指定 し た 距離 だ け 右 に 移動 させ ます 。 


これ が 「5em」 だ け イ ン デ ント され た 状態 で す 。1 行 
目 の 開始 位 置 を 、 指定 し た 距離 だ け 右 に 移動 させ ます 。 


text-indent プロ パテ ィ は 、 プ ロッ クレ ベル 要素 に 指定 し て 、 そ こ に 含ま れる テキ スト の 


先頭 の イン デン ト を 設定 し ます 。 


イン デン ト に は 、 マ イナ ス の 値 を 設定 する こと も で きま す 。 


OO ニーーーーーー 


【cSS】 
#sample]1 { text-indent: 1em } 
#sample2 { texxt-indent: 3em )} 
#sample3 { text-indent: 5em } 
em { 

font-style: norma]: 

Font-weight: bo1d: 

co]or: #EE6600: 

background: #FFFFFE 


【HTML】 


<p> これ は イン デン ト 「<em> 0</emz> (初期 値 )」 の 状態 で す 。</p> 


<D 1d="sample1"> 
これ が [「<em>1em</em>]」 だ け イ ン デ ント され 


く /p> 
<Dp 1d="sample2"> 
これ が 「<em>3em</em>」] だ け イ ン デ ント され 


< く /p> 
<p 1d="sample3"> 
これ が 「<em>5em</em>]」 だ け イ ン デ ント され 











く /p> 


た 状態 で す 。 
1 行 目 の 開始 位置 を 、 指定 し た 距離 だ け 右 に 移動 させ ます 。 4 


た 状態 で す 。 ョ 
1 行 目 の 開始 位置 を 、 指定 し た 距離 だ け 右 に 移動 させ ます 。 


た 状態 で す 。 
1 行 目 の 開始 位置 を 、 指定 し た 距離 だ け 右 に 移動 させ ます 。 4 


9 つい る RU 


1 五 且 の 7 


これ が 「1emj だ け イ ン デ ント され た 状態 で す 。1 行 目 の 開始 位 
置 を 、 指定 し た 距離 だ け 右 に 移動 させ ます 。 


これ が 「3emJ だ け イ ン デ ント され た 状態 で す 。1 行 目 の 開 
始 位置 を 、 指定 し た 距離 だ け 右 に 移動 させ ます 。 


これ が 「5cmJ だ け イ ン デ ント され た 状態 で す 。1 行 
目 の 開始 位 置 を 、 指定 し た 距離 だ け 右 に 移動 させ ます 。 
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の 同時 


Internet Explorer 6.0 
委 空白 や 改行 を その まま 表示 させ る - Microsoft Internet Ex 


アイ 要 ) 表示 お 気 に AO⑭ ツー ル D へ M プ 





function resetRedio() [ 1 function resetRadio() 【 
for(ver | = 0: 1 < documentforml.type-lengthz は わ for(yar i = 0: 1< document .foml.type.Iength: i+)【 
AHRICTHYHODDITYEDT 間 (doomert.forml tee[i]defaultOecked == true) 
else dooument .forml .type[i].checked = true 
document.forml.type[l]-checked = felse else 
dooument foml .tvpe[i].checked = false 
] 
] 





[white-space: pre」 は 、 連 続 する 半角 スペ ー ス や タプ 、 改行 を 入力 され て いる 通り に そ 
の まま 表示 させ る 指定 で す 。 

Windows 版 の Internet Explorer の 場合 、 バー ジョン 6.0 の 標準 モー ド で は 利用 で きま す 
が 、 互 換 モ ー ド や それ 以前 の バー ジョ ン で は 利用 で きま せん 。 


|Somnlo 


【cSS】 


code ({ white-space: pre } 


【HTML】 
く D> 
< く COod@> 
function resetRadio() { 
for(var i = 0: 1 &1t: document.fForm1 .type.1ength: ュ ++) ( 
1f (document . Form1 .type [1] .defau1tCheclked == true) 
document . Form1 .type [1] .checked = true 
else 
document . Form1 .type[1] .checked = Fa]se 


} 


< く / Code> 
く /p> 


⑲ HTML : TIPS「 新 し い ブ ラウ ザ は <!DOCTYPE> の 書き 方 で 表示 が 変わ る ! 」 (P.9) 





/E6.0 
改行 し な いで 表示 させ る 


re7ox 
Internet Explorer 6.0 9 つい る) Moz/a 


委 改行 し な いで 表示 させ る - Microsoft mternet 政行 し な いで 表示 させ る - Mozilla Frefox WMZ7.X 
アイ ル ⑤) 編集 E) 表示 お 気 に AD ツー ル D AI プ ⑪⑩ プア イル 編集) 表示 移動 ⑮ ブックマーク ⑧ ツー ル D AL プ ⑪ Kv】 の イー 


@ 京 ・ の 6 回 較 人 人 中 宮 sm29 | |e- ゅ -@9@ W6.X 





詞 = 
改行 の 禁止 改行 の 禁止 
画 普通 の 状態 画 普通 の 状態 
white-spacs プ ロバ パテ ィ に 「nowrap」 を 指定 する と 、 その 軍 囲 の white-space プ ロ パ ティ に 「nowrap」 を 指定 する と 、 その 男 囲 の テキ ス 


テキ スト (は 改行 され おく な り ます 。 中 に 含ま れ て いる 連続 する 半 ト は 改行 され な く な り ます 。 中 に 含ま れ て いる 連続 する 半角 スペ ー ス 


おえ.300 コ lchI は OSG20 作 AG88 や タプ 、 改行 コー ド は ひと つの 半角 スペ ー ス に 変換 され ます 。 


OperaZ 
Opeya6 


Sa ね // 
圧 5-ac 


画 white-space: nowrap 


画 white-space: nowrap 
white-space プ ロバ パティ に 「nowrap」 を 指定 する と 、 その 範囲 の テオ "hite-space プ ロ パ ティ に 「nowp」 を 指定 する と 、 その 範囲 の デキ ス 





< * < > 


「white-space: nowrap] は 、 連 続 する 半角 スペ ー ス や タプ ブ 、 改行 を ひと つの 半角 スペ ー ス 
に 変換 し て 、 改 行 せ ず に 表示 させ る 指定 で す 。 


| samo 還 還 還 旨 間 間 間 間 
【CSS】 


.Sample1 { white-space: nowrap } 


【HTML】 
<h1> 改 行 の 禁止 </h1> 


<h2> 田 普通 の 状態 </h2> 
<D> 


white-space プロパ ティ に 「nowrap」 を 指定 する と 、 そ の 範囲 の テキ ス の AN | 





ます 。 中 に 含ま れ て いる 連続 する 半角 スペ ー ス や タブ 、 改行 コー ド は ひと つの 半角 スペ ー ス に 変 
換 さ れ ます 。 
< く /p> 











<h2> 較 white-space: nowrap</h2> 

<Dp class="sample1"> 

white-space プロ パテ ィ に 「nowrap」 を 指定 する と 、 そ の 範囲 の テキ スト は 改行 され な く な り 
ます 。 中 に 含ま れ て いる 連続 する 半角 スペ ー ス や タプ ブ 、 改行 コー ド は ひと つの 半角 スペ ー ス に 変 和 
換 さ れ ま す 。 

< く /p> 
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全体 を 大 文字 また は 小文字 で 表示 させ る 
foYmms / コ ル い NT 


/jrefox 


Moz 放 a 
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Ope/a/ Internet Explorer 6.0 


Ope/a6 















Sa ね / 6 は EO | 





/E5-mac ーーー 
夏 | 大 文字 と 小文字 
lowercase 







capitalization effects of an elament's text 






UDDGrCaS@G 


CAPITALIZATION EFFECTS OF AN ELEMENT'S TEXT 







capitalize Firefox 1.0 


まま 体 を 大 文字 また は 小文字 で 表示 させ る - Mozi 


ii 還 
Capitalization Effects Of An Element's Text アイ ル (6 坊 入 6 表示 和夫 G) プ 92 マ ー2(B) ツー ル GQ 
9 の OslGu | 







大 文字 と 小文字 


lowercase 









capitallzation cffects of an element's text. 


UDDeTCaSG 







CAPITALIZATION FFFECTS OF AN ELFMENT'S TEXT. 


capitalize 






Capitalization Fffects Of An Element's Text. 






text-transform プロ パテ ィ は 、 全 体 を 大 文字 や 小文字 で 表示 させ た り 、 各 単語 の 先頭 の 
文字 だ け を 大 文字 で 表示 させ る こと の で きる 指定 で す 。 
日 本 語 の 部 分 は 特に 変化 し ませ ん 。 


EE 了 ku‥xqnx く 々 く X メ X メ ノ メ メ X ヒ レム u ヾ 9wm ヾ 談 ベ ュ ゥ ⑮ バ ュー ュ ゴゴ ュー 


【cSS】 

#sample1 { texxt-transEorm: 1OwerCage } 
#samp1e2 { texxt- モ angForm: uDDerCa8@e } 
#samp1e3 { texxt-transEForm: Capita1ize } re/ox 


2 oz 
co1or: #EE6600: 


background: #EFFFFFf 
} 
【HTML】 
<h1> 大 文字 と 小文字 </h1> 


<h2>1owercase</h2> 

<p 1d="sample1"> 

CAPTTALTZATTON EFFECTS OF AN ELEMENT'S TEXT. 
</p> 


<h2>uppercaSse</h2> 

<p 1d="sample2"> 

capital1ization effects of an element's text . 
く /p> 


<h2>capita]ize</h2> 

<p 1d="sample3"> 

capita]ization efEfects of an element's text. 
く /p> 
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る 


224 講 


双 若 定 


Internet Explorer 6.0 
負 背景 色 を 指定 する - Microsoft Internet Explorer 
アイ ルル 編集 (D 表示 ⑦ お 気 に AD⑳ ツー ル GD へ ルプ ゆ 


回 回 回 


検索 お 気に入り 





スタ イル シー ト を 使用 する と 、 さま ざま な 要素 の 背景 
色 を 自由 に 設定 する こと が で きま す 。 








9 いき 


、 ブ 音 明 色 を 指定 する - Mozilla Firefox 
アイ ル ( 臣 集 E) 表示 (V 移動 ⑬) プッ クマ ー の B) ツー ル ① AL2D 


5 邊 - 


に 0 二 Lel 


スタ イル シー ト を 使用 する と 、 さま ざま な 要素 の 背景 色 
を 自由 に 設定 する こと が で きま す 。 





ボッ クス と 背景 の 適用 範囲 








マー ジン : margin 
枠 線 : border 
内 容 の 周り の 空間 : padding 











background-color プロ パテ ィ は 、 背 景 の 色 を 指定 し ます 。 
色 の 値 と し て 「ransparent」 を 指定 する と 、 背 景 が 透明 に な っ て 下 の 背 景 が 透け て 見 える 
よう に な り ま す 。 こ こ で 設定 し た 色 は ボッ クス の マー ジン (常に 透明 ) に は 適用 され ま 
せん 。 

背景 色 だ け を 指定 し て いる と 、 ユ ー ザ ー が 設定 画面 や 独自 の スタ イル シー ト で 文字 色 
を 指定 し て いる 場合 な ど に 、 文 字 が 読み に くく な っ て し まう 場合 が あり ます 。 そ の よ 
うな こと を 避け る た め に 、 背 景色 を 指定 する 場合 に は 文字 色 も 同時 に 指定 する よう に 
し て くだ さい 。 


TU 間 呈 ーーーーーーーーーー 一 


【cSS】 
body { 
mardin: 2emz 
col1or: #EFEFFFf: 
bacikkground-Co1or: 六 EE3300 
} 
1 
text-a]1iqn: center: 
color: #FEEFfFf: 
bacjkground-co1or: #000000 


{ 
padding: 1em: 
color: #000000: 
background-Co1or: #EEcc00 
} 
div ({ 
padding: 1em: 
color: #000000: 
background-Co1or: 韻 EEEEEE 
} 
table, input { 
color: ##EFEFFf: 
background-oo1or: #EE3300 
} 
caption, select { 
color: #EFEFfFf: 
bacikground-Co1or: #333399 
} 
texEarea { 
Co]1or: #FEFFFF: 
background-Co1or: #339933 
} 


ko 








Fefox 
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【HTML】 
<h1>h1 要素 </h1> 


< く D> 
スタ イル シー ト を 使用 する と 、 さ ま ざ ま な 要素 の 背景 色 を 自由 に 設定 する こと が で きま す 。 
< く /p> 


<d1i マ > 
<tabl]e border="2" ce11padding="8"> 
<caption>tab1 e 要素 </caption> 
<tr><th> ヘッ ダ セ ル </ th><th> ヘッ ダ セ ル </ th><th> ヘッ ダ セ ル </ th></ 上 > 
<tr><td> デー タ セ ル </ td><td> デー タ セ ル </ td><td> デー タ セ ル < / td></ 上 > 
</tab1e> 
く D> 
<textarea rows="4" cols="50">textarea 要素 </textarea> 
< く /p> 
< く D> 
<1nput type="textt" value="input 要素 "> 
<1nput type="checkbox" name="chk" checked> 
<input type="checkbox" name="chk"> 
<1input type="radio" name="rdo" checked> 
<1nput type="radio" name="rdo"> 
<Se1ect> 
<option>seleot 要素 </option> 
<option>option 要素 </option> 
</ se1ect> 
<1nput type="button" value="Dbutton"> 
< く /p> 
< く /d1 マ > 


(2 


URL 画像 の URL 


Ga95 り 【 り バリ 













自 背景 画 父 を 指定 する - Microsoft Internet Explorer 司 | 
アア イル) 編集 E) 表示) お 気に入り ウー ル ①D へ ヘル ブフ 


② 率 ・⑳ 思 較 め 人 の 辺 天 5% み 9 


ー 
E 















ラコ 引 た テー ド 研 使用 する どき さま ざま な 要素 の 背景 
画像 を 自由 に 設定 する = と が で きま す 。 








191G ひ る 5 
や 普 明 画 価 を 指定 する - Mozilla Firefox 問 回 四 
アイ ル (E 編集 (D 表示 移動 ③ プッ 2 マー ク B) ウー ル ①D へ ルプ 8 


外 - ほ - 居 Gosw 加 












ズ タ イ ルシード を 使用 する と 、 さまざま だ な 要素 の 育 流 画 
像 を 自由 に 設定 ずる こと だ で きま す 。 
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background-image プロ パテ ィ は 、 背 景 の 画像 を 指定 し ます 。 

背景 色 の 場合 と 同様 に 、 こ こ で 設定 し た 画像 は ボッ クス の マー ジン (常に 透明 ) に は 適 
用 され ませ ん 。 環境 に よっ て は 、 背 景 画像 が 表示 され な い 場 合 も あり ます の で 、 背 景 
色 (文字 色 ) も 同時 に 指定 し て お く よ う に し て くだ さい 。 


前 ee 


【CSS】 

body { 
margin: 2emz 
co1or: #FFFFFF: 
bacjkground-Co]1or : 
background-1mage : 


jn 加 


#EF3300: 
ur1 (red . pg) 


text-a1ign: center: 


Co1or: #FFFFfff: 
bacjkkground-co1or: 


bacjkground- image 


p { 
padding: 1em: 
co1or: #000000: 
background-co]or : 
background-image: 

} 

div { 
padding: 1em: 
color: #000000: 
background-cCo1or : 
backkground-1mage 

} 

table, input { 
Co]1or: #EFFfFFf: 
background-cCo1or : 
bacjkground-1mage 

} 

caption, se1ect { 
Co]or: #FFFfff: 
background-co1or : 
background-1mage : 

} 

texEarea { 
GOOY: 参上 王 F 王 F 王 : 
background-co1 or : 
background- image 

} 


#000000: 
ur1 (bl1ack . pg ) 


#EFcc00: 
ur1 (ye11ow.giE) 


#FFffff: 
ur1 (white .]pg) 


#EF3300: 
ur1 (red . Jpg) 


#333399: 
ur1 (b1ue .giE ) 


#339933: 
ur1 (green . pg ) 


【HTML] 
<h1>h1 要素 </h1> 


<p> 
スタ イル シー ト を 使用 する と 、 さまざま な 要素 の 背景 画像 を 自由 に 設定 する こと が で きま す 。 
</p> 


<d1 マ > 

<tab1e border="2" ce11padding="8"> 
<caption> て ab1 e 要素 </caption> 

<tr><th> ヘッ ダ セ ル </th><th> ヘッ ダ セ ル </th><th> ヘッ ダ セ ル </ th></t エ > 
<tr><td> デー タ セ ル </ td><td> デー タ セ ル </ td><td> デー タ セ ル </ 上 d></ 上 > 
</ tab1e> 





<p> 

<textarea rows="4" col1s="50">textarea 要素 </ textarea> 97377 
JMB /E5-ma 
<P> 店.ma 


<input type="text" value="1nput 要 素 "> 
<input type="checkbox" name="Chk" checked> 
<input type="checkbox" name="Chk"> 
<input type="radio" name="rdo" checked> 
<1nput type="radio" name="rdo"> 
<Sse] ec キ > 
<option>se1 ect 要素 </option> 
<option>option 要素 </option> 
</ se1ec> 
<1input type="button" value="button"> 
< く /p> 
</d1V> 


EE た 
回 較 回 
3】 に 4 ニー】 


や 
世 


/7e7ox 


三 
に 3 
に ゴ 


還 
トイ 


ぶ 慎 滞 避 語 棋 
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repeat 

repeat-x 横 方 向 に の み 繰り 返し て 表示 
repeat-y 縦 方 向 に の み 繰り 返し て 表示 
no-repeat 繰り 返さ ず に ひと つ だ け 表 示 


IOIdS の 1 り 【 り rd 上り 


計 背 具 画 依 の 並び 方 を 指定 する 
表示 ⑦ お気 に 入 0@ 


BE 


Microsoft Imternet Ezplo 


プア イル (⑤ 編集 ⑤ ー ル D 


らら の 


へ ルプ 


守 背 上 画 化 の 並び 方 を 指定 する 
アイ ル ) 訪 集 (た) 表示 お 気 に AD⑨ 


・ の 6 還 還 の の 


Microsoft mternet Explo.。 選 


ッ - ル ①D AM20D 


お 気に入り 


4 


像 の 並び 方 を 箕 定 する 
アイ ル ( 相 集 ) 表示 Q⑦ お 気に入り 


@・ の 回 回 


Microsoft nternet Explo 


ッ ー ル D へ ルプ ⑪ 


当 背 只 画 人 の 並び 方 を 指定 3 
アイ ル ( 編集 人 ) 表示 Q⑰ お 気 に 入 D⑯ ウー ル ① 


Microsoft nternet Explo 


へ ルプ ⑪ 


お 気に入り 


GO の 帳 還 の の 時 


230 講 某 


終 横 に タイ ル 状 に 繰り 返し て 表示 (初期 値 





9 いる 
、) 背景 画 化 の 並び 方 を 指定 する 
編集 


へ 年 - 了 ゆ - ダ 


Mozilla Firefox 


アイ ル ⑤ 表示 移動 (⑬ プッ 9y-2@) 


9 Os 員 


ッ - ル ① へ 2⑪ 


、 背 太 画 食 の 並び 方 を 指 
イル (5) 編入 





、) 背 明 画像 の 並び 方 を 指定 する 


Mozilla Firefox 






アイ ル (5 終 8 


ゃ - ゅ 人 @ 


表示 め 
@) 〇 fj 和 め GL 


移 箇 ⑬ プッ ウマ ー ク (⑧ 


画 銀 の 並び 方 を 指定 


background-repeat プロ パティ は 、 背 景 画像 が 指定 され た 場合 の 、 画 像 の 並び 方 を 設 
し ま が 。 


| oni 


【cSS】 

body { 
co]or: #EE6600: 
background-co1or: #FEFFff: 
background-1mage: ur1(back.gif ) : 
bacikground- エ epGa : nO- エ GDpGa セ 

} 

h1 { text-a1ign: right } 


【HTML】 
<h1>no-repeat</h1> 





圧 5-mac 
左 4-mac 








背景 画像 の 表示 位置 を 指定 する 
background-position: 表示 位置 th 
【 表 示 位 置 】 


横 位置 縦 位置 左上 を 起点 と し た 単位 付き の 数 値 ま た は % 
横 位 置 縦 位置 left ・right ・center ・top ・bottom 







ICO きか いさ り 【 り OAI 1913( い る) 


音 遇 画 銀 の 寺 位 置 を 匠 定 する 


を - ゅ .@G の owlo 


center center = 50% 50% 


音 画 角 の 表示 位 軒 を 指定 する - Mozilla Firefox 
アイ ル 上 ) 編 案 ) 表示 移動 ⑬ ブッ クマー の (⑧) ツ 


を - ゅ あら @@ の owa 


right bottom=100% 100% 


background-posiion プロ パテ ィ は 、 背 景 画像 が 指定 され た 場合 の 、 画 像 の 表示 位置 を 
設定 し ます 。 

単位 付き の 数 値 と % に よる 指定 の 場合 は 、 横 位置 ・ 縦 位置 の 順に 半角 スペ ー ス で 区 切っ 
て 指定 し ます 。 値 が ひと つ し か 指定 され な か っ た 場合 は 、 横 位置 が 指定 され た こと に 
な り 、 そ の 場合 の 縦 位置 は 「50%」 の 位置 に な り ま す 。 単位 付き の 数 値 の 場合 は 、 領 
の 左上 か ら 画 像 の 左上 まで の 距離 を 指定 し ます 。% に よる 指定 の 場合 は 領域 の 指定 し 
た 割合 の 位置 に 、 画 像 の 同じ 割合 の 位置 が 合わ せ て 表示 され ます 。 こ れ ら は 混在 きせ 
て 指定 する こと が 可能 で す 。 位 置 を 示す キー ワー ド (left や top な ど ) は 、 そ れ ぞ れ jlcft 
と top は 「0%」、center は 「50%」、right と bottom は 「100%」 を 指定 し た 場合 と 同じ 結果 に 
な り ま す 。 こ れ ら は 順不同 で 指定 する こと が で き 、 ひ と つ し か 指定 し な か っ た 場合 は 
も う 一 方 が center に な り ま す 。 





232 詳 


ET 王 只 ーーーーーーーーーーーーーー 一 


【cSS】 

body ( 
co1or: #000000: 
background-co1or: FEFFFFf: 
background-image: ur1(1ogo.g1f ) : 
jackground-repeat : noO-reDea : 
bacjkground-DOS1 ユ モ 1On: CeGnter Cen@r 


【HTML】 
<p>center Center = 50 も 50 も </p> Opera6 


Sa ね // 


圧 5-m 
圧 4-mar 





ニー に 
mm 
同軸 
いい 】 に ) 


背景 画像 を 固定 する 


定 す る か どう か 


回 re7ox 


し メー レル | 
fixed 育 景 画像 の 位置 を 固定 する 
Scrall 背景 画像 を 他 の 内 容 と 共に スク ロー ル さ せる (初期 値 ) 
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91G いる) 
彰 明 画 殺 を 固定 する - Mozilla Firefox 
アイ ル (P) 編集 CE) 表示 (Y) 移動 ⑬) ブッ クマ ー5(⑧) ツー- ル CD へ ルプ ⑬ 
- 全 の om 加 


Ope/a/ 
Opeya6 





フィ ッシュ イー ター 


ヒラ メ を 初め て 釣り あ (げた 時 
その 説い 歯 に 甘 
その 主食 は . 生き た 魚類 エビ 類 . イカ 天 


は フィ ッシュ イー ター 
ヒラ メ を 初め て 釣り あげ た 時 
その 鋭い 徐 に 鷲 く 
その 主食 は 、 生き た 魚類 、 エビ 頼 . イカ 類 な ど で 
動い て いる も の を 食べ る 習性 が ある 。 








を 狙う 場合 は 、 より 遼 く へ キャ スト する こと も 合 は 、 より 相 く へ キャ スト 


重要 だ が 、 ルアー は より リア ル な も の を チョ イス し た い 。 





重要 だ が . 
私 の 経験 で は 、 メタ ル ジ グ より は ミノ 





は より リア ル な も の を チョ イ 


私 の 経験 で は 、 メタ ル ジ グ より は ミノ ー ー よ り は 


* よ り 好 釣果 を 招く よう だ フト ルアー が より 放 的 果 を 招く 


雪 背 具 画 多 を 固定 
ファ イル 給 集 ) 9@ ッ - ル CD へ AM プ ⑪ 


@・@6 回 還る の ws 吉 pmco 
ウ 】 ヶ 


食 を 固定 する - Mozillar 
プア イル (上 騙 集 ⑥ 表示 移動 ⑯ "プッ クマ ー2B) : 


年 - 呈 の 9 の om 加 


侍 寺 
背 
景 
定 
す 
る 


ご は まり り 77 ル が も の を チョ イィ K た い 紀 





剛 に は 、 メタ ル ジ グ より は ミノ ー、 ミノ ー よ り は 
ソフ トル アー が より 好 釣 果 を 招く よう だ 。 


グ よ り は 悦 より は 


が より 好 釣 果 を 招く よう だ 





background-attachment プロ パテ ィ は 、 背 景 画像 が 指定 され た 場合 に 、 そ の 画像 を (ウィ 


ンド ウ に 対し て ) その 位置 に 固定 する か 、 他 の 内 容 と 共に スク ロー ル さ せる か を 指定 し 
Ed 記 


234 民 調 





iri 


【cSS】 

body { 
co1or: #000000: 
background-col1or: #EFFFFf : 
background-1mage: ur1 (hirame.]Dp9) : 
jackground- エ reDea: nO- エ reDea : 
background-attachment: Fixxed: 
marg1n-Eop: 100px: 
text-a1ign: right 

} 

p { 1ine-height: 2em } 


【HTML】 

<h1> ヒラ メ は フィ ッシュ イー ター</h1> 

<D> 

ヒラ メ を 初め て 釣り あげ た 時 、<br> 

その 鋭い 歯 に 驚く アン グラ ー も 多い 。<br> 

その 主食 は 、 生 きた 人 魚類 、 エピ 類 、 イ カ 類 な ど で 、<br> 
動い て いる も の を 食べ る 習性 が ある 。 

く /p> 

<Dp> 

ヒラ メ を 狙う 場合 は 、 よ り 遠 く へ キャ スト する こと も <br> 
重要 だ が 、 ル アー は より リア ル な も の を チョ イス し た い 。<br> 
私 の 経験 で は 、 メ タル ジグ より は ミノ ー、 ミ ノー より は <br> 
ソフ トル アー が より 好 釣 果 を 招く よう だ 。 

< く /p> 


/ efox。 
Moz 罰 


Opera6 


Sa ね 
左 5-ma 
話 和 4mac 








m 
ご 














3 青 景 賠 係 を まとめ て 指定 する 
。/E40 | Dackgroundi: 啓 暴 周 加 の プロ パパ ティ の 信 
太 re7ox 


寺 に に イノ クシ 4=『A て あまり ) 1| 


background-color (P.224) で 指定 で きる 値 
background-image (P.227) で 指定 で きる 値 
background-repeat (P.230) で 指定 で きる 値 
background-position (P.232) で 指定 で きる 値 
background-attachment (P.234) で 指定 で きる 値 


7 
ーAZX 
_A6X 






また ) に //』 
圧 5-7mac 
夏 4-mac 


= 
1 


Internet Explorer 6.0 19TY コ (いる 上 


MO へ 2 





background プロ パテ ィ は 、 背 景 関連 の プロ パテ ィ の 値 を まとめ て 指定 し ます 。 
必要 な 値 を 任意 の 順序 で 半角 スペ ー ス で 区 切っ て 指定 し ます 。 


|Sonnlc 王 呈 時間 


body { 

color: #000000: 

bacjkkgroundi 拉 EF 下 fF un ェ 1(back.g1F) right repeat-Y 
前 








margin-top: マー ジン 倫 上 マー ジン 


margin-bottom: マー ジン 條 下 マ ー ジ ン 
margin-left: マー ジン 征 左 マー ジン 
margim-right: マー ジン 傘 石 マー ジン 
margim: マー ジン を 上 ・ 石 ・ 下 ・ 左 マー ジン 


デジ 単位 付き の 数 値 ・9%%・auto 


TOGnd9 り (Oda ぴ リ 
E に 0 じん: か キ .】 p 
アイ ル 久信 () 表示 お気 に 入 0@ 


QO・② の 回国 の の ws 宮 sm29 


ボッ クス の 構造 





上 マー ジン : margin-top 


9-ulBeu ・ ニ ベー ヶ 巴 | 


1uBu-ulBBu : ニー ょ 表 | 





下 マ ー ジ ン : margin-bottom 











これ ら の プロ パテ ィ は 、 マ ー ジ ン を 設定 し ます 。 

% で 指定 し た 場合 に は 、 指 定 き され た ボッ クス を 含む ボッ クス の 横幅 に 対す る 割合 と な 
り ま す 。 上 下 の マ ー ジ ン に つい て も 、 高 さき で は な く 横 幅 を 参照 し ます の で 、 注 意 し て 
くだ さい 。 値 と し て 「auto」 を 指定 する と 、 マ ー ジ ン は 状況 に 応じ て 自動 的 に 調整 され 


2P27 





ト EE リロ 
圧 5-ac 
/E4-mac 


ボ 
必 
ク 
ス 
の 
設 
定 
を 
す 
る 










隊 : 7e 7ox 
Moz/g 
リル 
6.X 
2 ん 





































ます 。 た と えば 、 イ ン ラ イン 要素 の 上 下 左右 と プロ ッ ク レ ベル 要素 の 上 下 に つい て は 
0 に な り 、 プ ロッ クレ ベル 要素 の 左右 に 指定 する と 両者 が 同じ 値 と な る た め に セン タリ 
ジグ さき 汽 ま き 。 

「margin」 を 利用 する と 、 上 下 左右 の マー ジン を 一 度 に 設定 する こと が で きま す 。 そ の 
場合 、 値 を 半角 スペ ー ス で 区 切っ て 指定 し ます が 、 与 えら れ た 値 の 個数 に よっ て 次 の 
よう に マー ジン が 設定 され ます 。 


・ 値 が 1 つの 場合 値 1 上下 左右 
・ 値 が 2 つの 場合 値 1ー 上 下 値 2 一 左右 


・ 値 が 3 つの 場合 値 1ー 上 値 2 一 左右 値 3 つ 下 
・ 値 が 4 つの 場合 値 1 一 上 値 2 一 右 値 3 つ 下 値 4 一 左 





な お 、 上 下 に 隣接 する プロ ッ ク レ ベル 要素 同士 の マー ジン は 、 相 殺さ れ て 大 きい 方 の 
マー ジン だ け に な り ま す 。 ま た 、 マ ー ジ ノン 部 分 は 常に 透明 で 色 を 設定 する こと は で き 


ませ ん 。 


|Somnlc 王 呈 昌和 


【cSS】 


body { margin: 0 } 


p 【 


text-a1iqgn: cenEer: 
font-weight: bo1d: 
padding: 0.5em: 

border: so11d 3px #000000: 
Co1or: #EFfF 人 ff: 
background: #ffF3300 


} 

#samp1e1 
#samp1e2 
#samp1e3 
#samp1e4 
#samp1e5 


【HTML】 


{ 
{ 
{ 
{ 
{ 


margin: 0 } 
margin: 20px ) 
margin: 40px } 
marg1n-right: 50% } 
margin-1eft: 50% } 


<p 1d="samp1e1"> 上 下 左右 マー ジン : 0 ピク セル </p> 
<p 1d="samp1e2"> 上 下 左右 マー ジン : 20 ピク セル </p> 
<p 1d="samp1e3"> 上 下 左右 マー ジン : 40 ピク セル </p> 
<p 1d="samp1e4"> 右 マ ー ジ ン : 50*%</p> 
<p 1d="sample5 "> 左 マ ー ジ ン : 50%</p> 


邦 で 上 の 空間 
衝 四 下 の 空間 

机 且 セー 本 

作 ” を 石 の 空間 

「 を 上 ・ 石 ・ 下 ・ 左 の 空間 


ICO(d9 い 1 り 【OYod り U 1913( い る RU 
内 容 の 周り の 空間 を 設定 する - Microsoft mternet Eplorer 司 | 回 | 芝 | 1 内 容 の 周り の 空間 を 設定 する - Mozilla Firefox 
アイ ル ( 内 集 (5) 表示 ⑰ お 気 に 和 D@ ツウ - ル MD へ 環 入 5) 表示 移 生 ⑬) プッ クマ ー ク (B) ウール CD ヘル プ ⑪ 


- 友 ぬ 人 9ow 公 





ボッ クス の 構造 





マー ジン : margin 
枠 線 : border 


内 容 の 周り の 空間 : padding 


トン NNN 














| 239 


yye7ox 
Moz 廊 a 
リル 
6.X 
_A4X 





これ ら の プロ パテ ィ は 、 内 容 を 表示 する 領域 と 枠 線 の 間 の 空間 の 幅 を 設定 し ます 。 

め % で 指定 し た 場合 に は 、 指 定 さ れ た ボッ クス を 含ん だ ボッ クス の 横幅 に 対す る 割合 と 
な り ま す 。 上 下 の 空間 の 幅 に つい て も 、 高 さ で は な く 横 幅 を 参照 し ます の で 、 注 意 し 
て くだ さい 。 

「padding」 を 利用 する と 、 上 下 左右 の 幅 を 一 度 に 設定 する こと が で きま す 。 そ の 場合 、 
値 を 半角 スペ ー ス で 区 切っ て 指定 し ます が 、 与 えら れ た 値 の 個数 に よっ て 、 次 の よう 
に 幅 が 設定 され ます 。 


・ 値 が 1 つの 場合 値 1ー 上 下 左右 
・ 値 が 2 つの 場合 値 1ー 上 下 値 2 一 左右 
・ 値 が 3 つの 場合 値 1ー 上 値 2 左右 値 3 つ 下 


・ 値 が 4 つの 場合 値 1ー 上 値 2 一 右 値 3 一 下 値 4 一 左 





【cSS】 
p 【 
Font-weight: bo1d: 
border: so11d 3px #000000: 
Col1or: #FFFFff: 
background: #FE3300 
} 
#sample1 { paddingi 0 }) 
#sample2 { paqding: 20px } 
#sample3 { paddingi 40px } 
#sample4 { padqding-right: 50% } 
#sample5 { padding-1eEt: 50% } 


【HTML】 

<Dp 1d="sample1"> 

この 段落 で は 、 内 容 と 枠 線 の 間 を 上 下 左右 と も 0 ピク セル に 設定 し て いま す 。 
く /p> 

<p 1d="sample2"> 

この 段落 で は 、 内 容 と 枠 線 の 間 を 上 下 左右 と も 20 ピク セル に 設定 し て いま す 。 
< く /p> 

<p 1d="samp1e3"> 

この 段落 で は 、 内 容 と 枠 線 の 間 を 上 下 左右 と も 40 ピク セル に 設定 し て いま す 。 
< く /D> 

<p 1d="sample4"> 

この 段落 で は 、 右側 の 内 容 と 枠 線 の 間 を 50 に 設定 し て いま す 。 

< く /p> 

<p 1d="sample5"> 

この 段落 で は 、 左側 の 内 容 と 枠 線 の 間 を 50 に 設定 し て いま す 。 

く /p> 


本 
いこ 】 


枠 線 の 太 さ を 指定 する 





bordler-top-width: 太 さ 年 上 の 枠 線 の 太 さ 

border-bottom-width: 太 さ 征 下 の 枠 線 の 太 さ 

bordler-1eft-width: 太 さ 外 左 の 枠 線 の 太 さ 

border-right-width: 太 さ 久石 の 枠 線 の 太 さ 

bordler-width: 太 さ 人 答 上 ・ 石 ・ 下 ・ 左 の 枠 線 の 太 さ 
太 さ 単位 付き の 数 値 ・thin ・medium ・ thick 


Internet Explorer 6.0 9 ひる) 
寺社 線 の 大 さ を 指定 する - M xplorer 回 福引 の 大 さ を 指定 する - Mozilla Firefox 
フィ イル (E) 編集 (D 表示 お ね | り (0 へ ルプ イル) 編集 ) 表示) 移動 ⑬ ブッ マーク B ツー ル ① AM プ ⑪ 給 


・② 団 還 人 ぬ め の wm 索 sm0 年 - ゆ - 息 Gom 
上下 左右 の 枠 の 太 さ :thin 上 下 左右 の 枠 の 太 さ :thin 


上 下 左右 の 枠 の 太 さ カ 期 値 ) 上 下 を 右 の 枠 の 太 さ : medium (初期 値 ) 





上 下 左右 の 枠 の 太 さ :thick 


ト 下 左右 の 枠 の 太 さ :1sm 


左 :100 ビ ピク セル 右 :0 








これ ら の プロ パテ ィ は 、 枠 線 の 太 さ を 設定 し ます . 
「border-widh」 を 利用 する と 、 上 下 左 右 の 枠 線 の 大 き を 一 度 に 設定 する こと が で きま 
す 。 そ の 場合 、 値 を 半角 スペ ー ス で 区 切っ て 指定 し ます が 、 与 えら れ た 値 の 個数 に よっ 
て 、 次 の よう に 枠 線 の 大 さ が 設 定 さ れ ま す 。 

・ 値 が 1 つの 場合 値 1 上 下 左右 

・ 値 が 2 つの 場合 値 1ー 上 下 値 2 一 左 右 

・ 値 が 3 つの 場合 値 1ー 上 値 2 一 左右 値 3… 下 

・ 値 が 4 つの 場合 値 1ー 上 値 2 一 右 値 3 つ 下 値 4 つ 左 





「thin」「medium」「thickl は 、 そ れ ぞ れ 「 細 い 枠 線 ]「 中 くら い の 枠 線 ]「 太 い 枠 線 ] に 設定 し 
ます 。 こ の 場合 の 実際 の 大 さき は 、 ブ プラ ウザ に よっ て 異な り ま す 。 


ーー 
hl 
Km 
| 


5a7a// 
5-mac 
夏 4-mac 








トン DIN MI 




























6 Fire7ox 
Moz 罰 
リル,6 
6.X 


ーー 


【cSS】 
可 # 
text-a1ign: cenEer: 
font-weight: bo1d: 
padding: 0.5em: 
border: so1id #000000: 
color: #EFFFFff: 
jbackground: #Ef3300 
} 
#samp1e1 { border-width: 1px } 
#samp1e2 { border-width: thin )} 
#samp1e3 { border-width: medium } 
#sample4 { border-width: thiok )} 
#sample5 { border-width: 1em } 
#sample6 { 
border-1eE モ -width: 100px: 
border- エ ight-width: 0: 
} 


【HTML】 

<p 1d="samp1e1 "> 上下 左右 の 枠 の 太 さ : 1 ピク セル </p> 

<p 1d="samp1e2"> 上 下 左右 の 枠 の 太 さ : thin</p> 

<p id="samp1e3"> 上 下 左右 の 枠 の 太 さ : medium (初期 値 )</p> 
<p 1d="samp1e4"> 上 下 左右 の 枠 の 太 さ : thick</p> 

<p 1d="sample5"> 上 下 左右 の 枠 の 太 さ : 1em</p> 

<p 1d="sample6"> 左 : 100 ピ クセ ル : 0</p> 


枠 線 の 色 を 指定 する 


bordler-top-color: 双 基 定 傘 上 の 枠 線 の 色 
border-bottom-color: 避 閣 定 欠 下 の 枠 線 の 色 
bordler-left-color: 事 壮 定 欠 左 の 枠 線 の 色 
border-right-color: 色 閣 定 條 石 の 枠 線 の 色 
border-color: 台 定 年 上 ・ 石 ・ 下 ・ 左 の 枠 線 の 色 








Internet Explorer 6.0 9TG(O ひ る RI 
計 視 線 の 色 を 指定 する - Microsoft nternet Explorer 


プア イル 編集 D 表示 お 気 に 入 D⑯ ウー ル D Al プ ⑪ 


Rs・@ 思 国 約 wm 寮 sm2D 
ミア *P 


電線 の に 
アイ ル ) 編集 表示 移動 ⑯ ブッ 2 マー2⑧ ツウ - ル ①D AM プ ⑪ 詩 


年 - 呈 - 依 G ら の om 加 


Sa ね // 
た 5-mac 
克 4-ac 





border-color- #fRH300 border-color: # 人 3300 





border-color- ffcc00 border-color: Wffcc00 


border-color: 39933 border-color: 339933 


border-color: 333399 
border-color- W333399 ES 


上 :W339933 下 :WfS300 左 :W333399 右 : 


上 :#339933 下 :WTR300 左 :#333399 右 : Wffcc00 


fcct 





これ ら の プロ パテ ィ は 、 枯 線 の 色 を 設定 し ます 。 

「border-color」 を 利用 する と 、 上 下 左 右 の 枠 線 の 色 を 一 度 に 設定 する こと が で きま す 。 
その 場合 、 値 を 半角 スペ ー ス で 区 切っ て 指定 し ます が 、 与 えら れ た 値 の 個数 に よっ て 、 
次 の よう に 枠 線 の 色 が 設定 され ます 。 








・ 値 が 1 つの 場合 値 1ー 上 下 左右 

・ 値 が 2 つの 場合 値 1 ユ 上 下 値 2 一 左右 

・ 値 が 3 つの 場合 値 1ー 上 値 2 つ 左 右 値 3 つ 下 

・ 値 が 4 つの 場合 値 1ー 上 値 2 一 右 値 3 つ 下 値 4ー 左 








な お 、 こ の 値 の 初期 値 は 、「color: 名 閣 定 ] で 設定 され て いる 値 と な り ま す 。 








ii 


【cSS】 
p ( 
text-a1ign: cenEer: 
Font-weight: bo1qd: 
padding: 1emz 
border: So11d 6px: 
} 
#sample1 ( border-co1or: #EE3300 } 
#sample2 { border-co1or: #EEcc00 } 
#samp1e3 { border-co1or: #339933 } 
#sample4 { border-Co1or: #333399 } 
#sample5 
borde エ - も Op-CO1Or: 339933 : 
border-bottom-Co1or: #EE3300: 
border-1eE モ -Co1or: #333399: 
border- エ ight-Co1or: EEcc00 



























jrefox 
Moz 衣 a 
リル 
6.X 
_A4X 





【HTML】 

<p 1d="samp1e1 ">border-co1or: #EF3300</p> 

<Dp 1d="sample2">jborder-co1or: #FFcc00</Dp> 

<D 1d="gsamp1e3 ">border-co1or: #339933</p> 

<p 1d="samp1e4">border-Co1or: #333399</p> 

<p 1d="samp1e5"> 上 : #339933 下 : #EfF3300 左 : #333399 右 :#fFfcc00</p> 





枠 線 の 形式 を 指定 する 
border-top-style: 形 工 年 上 の 枠 線 の 形式 LE20 
border-bottom-style: 形式 年 下 の 枠 線 の 形式 妥 53 
border-1eft-style: 形式 を 左 の 枠 線 の 形式 
border-right-style: 形 寺 へ を 石 の 枠 線 の 形式 
border-style: 形式 年 上 ・ 石 ・ 下 ・ 左 の 枠 線 の 形式 リル 

| AM4.X 
形式 none ・hidden ・dotted ・dashed ・solid ・double ・groove ・ の 2 
ridge ・inset ・outset Opera6 


Internet Explorer 6.0 


詩 槍 絆 の 形式 を 指定 する - Microsoft nternet EE 
アイ ル (⑥ 弓 集 () 表示 お 気 に 入 0 ウー ル ①D へ 2⑪ 


QO の - 還 国人 の の ws 支 5mo 











Firefox 1.0 


Sa ね 


草 綴 の 形式 を 指定 する - Mozilla Firefox 
プイ ル (P 編集) 表示 移動 ⑬ ブッ クマ - が B) ツー ル ① AM プ ⑳ 谷 


征 - ゆ - 銀 G の osG 


圧 5-mac 
圧 4-mac 





none 





慎 避 周回 きさく 汗 上 


これ ら の プロ パテ ィ は 、 枠 線 の 形式 を 設定 し ます 。 

「border-style」 を 利用 する と 、 上 下 左 右 の 枠 線 の 形式 を 一 度 に 設定 する こと が で きま す 。 
その 場合 、 値 を 半角 スペ ー ス で 区 切っ て 指定 し ます が 、 与 えら れ た 値 の 個数 に よっ て 、 
次 の よう に 枠 線 の 形式 が 設定 され ます 。 





・ 値 が 1 つの 場合 
・ 値 が 2 つの 場合 
・ 値 が 3 つの 場合 
・ 値 が 4 つの 場合 


値 1ー 上 下 左右 

値 1ー 上 下 値 2 一 左 右 

値 1ー 上 値 2 一 左右 値 3 つ 下 
値 1 コ 上 値 2 一 右 値 3… 下 値 4 つ 左 
































万 re7ox 
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ルル 6 
| A4X 


「none」 と 「hiddenl は どちら も る 枠 線 を 表示 せ ず 、 枠 線 の 太 さ も 0 に 設定 し ます 。 た だ し 、 
テー ブル の セル の 枠 線 と し て 重なり あっ た 場合 に は 、「none」 は 他 の 値 を 優先 し 、「hidden] 
は 自分 自身 の 値 を 優先 し ます 。 こ の 値 の 初期 値 は [none」 で す 。 


EEEK ミ ee 


【cSS】 
9 
text-a11ign: Center: 
font-weight: bo1d: 
padding: 0.5emz: 
border: so11d 8px #FF3300: 
} 


#sample1 ( border-style: none } 
#samp1e2 { border-sty1e: go11d } 
#sample3 { border-style: doub1e } 
#sample4 { border-sty1le: dashed } 
#sample5 ( border-style: dotted } 
#sample6 ( border-sty1e: groove } 
#samp1e7 ( border-style: ridge } 
#sample8 { border-style: nset } 
#sample9 ( border-sgtyle: outget )} 
【HTML】 


<Dp 1d="sample1 ">none</p> 
<p 1d="samp1e2">so11d</p> 
<Dp 1d="samp]e3 ">doub1e</D> 
<p 1qd="gsample4">dashed</p> 
<D 1qd="sample5 ">dotted</p> 
<D 1d="sample6 ">g9rOOVe</Dp> 
<D 1d="sampl1e7 ">r1dge</Dp> 
<D 1d="sample8">1nse</D> 
<D 1d="sample9 ">outse 上 </p> 


im 
の 
(ご) 


ーー 
hul 
いい 話 
mn 


に は レキ ゴン k4」 注 まう 


bordler-top: 双 線 悦 連 の プロ パパ ティ の 倫 年 上 の 枠 線 の 設定 
bordler-bottom: 郁 直 厨 遠 の プ ロバ パテ ィ の 佑 欠 下 の 枠 線 の 設定 


EM 
由 】 に し 1 
に 】 = 【 こ 】 
ミ 


7 
bordler-left: 砕 直 周 連 の プロ パテ ィ の 誠 へ 生 左 の 枠 線 の 設定 ル 


border-right: 郁 線 厩 連 の プロ /『 テ ィ の 値 生 石 の 枠 線 の 設定 
bordler: 区 林 賠 連 の プロ パテ ィ の 為 を 上 下 左 右 の 枠 線 に 
同じ 値 を 設定 


(リッ コア 4 
【 枠 線 関連 の プロ パテ ィ の 値 】 0perg6 
border-color(P.243) で 指定 で きる 値 n 
borderrwidth(P.241) で 指定 で きる 値 3 人 8 


border-style(P.245) で 指定 で きる 値 /E5-mac 
話 mac 


団 
還 


- コ 上 エゴ に 
に J 








ITO(StUUUYOIAU 






強 視線 を まとめ て 指定 する - Microsoft Internet Explorer 同 回 内 
ファ イル () 編集 (EC) 表示 び ) お 気 に 和 D(⑳ ツール ①D ヘル プ ⑪ 


OO 回 の の wm mmo 







9 ひる 






枠 線 を まとめ て 指定 する - Mozilla Firefox 瑞 回 了 






ロ 
ロ border- dotted 7px 仙 39933 









ロ 


bordezldWe1Opc 光 2966cc: | 間 胡 mp ニコ ピ の = は = なる こ ュ こる や スネ こさ な ぷ と ッ こ ュー 
1 












ロ 
テ border: dotted 7px 339933 ロ 
品 





border: ridge 10px 人 3366cc 


これ ら の プロ パテ ィ は 、 枠 線 関連 の プロ パテ ィ の 値 を まとめ て 指定 し ます 。 

必要 な 値 を 任意 の 順序 で 半角 スペ ー ス で 区 切っ て 指定 し ます 。 指定 し な か っ た 値 に つ 
いて は 、 初 期 値 が 指定 され た こと に な り ま す 。 

な お 、「border」 を 使用 し て 上 下 左右 に 別々 の 設定 を する こと は で きま せん 。 














22P7 





















irefox 
の 
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【cSS】 

p 【 
text-a1ign: Center: 
Font-weight: bo1d: 
margin: 2emz 
padding: 1em 

} 


#sample1 { border: doub1e 3px #EE3300 
#Ssample2 { border: dashed 2px #EFcc00 
#Ssample3 { border: dotted 7px #339933 
#sample4 ( border: ridge 10px #3366cc 


【HTML】 

<p 1d="samp1e1 ">border: double 
<p 1d="sample2">border: dashed 
<p 1d="gsamp]1e3">border: dotted 
<p 1d="sample4">border: ridqge 


3pX 
2px 
7px 
10px 


ーーー ーー 


#FF3300</p> 
#EFfcc00</p> 
#339933</p> 
#3366cCc</p> 


幅 と 高 さ を 指定 する 





Width: 碑 
height: 高 さ 


幅 ・ 高 さ 単位 付き の 数 値 ・9% ・auto 


Internet Explorer 6.0 
所 候 し 高 さ を 指定 する - Microsoft Internet Explorer 
ファイ ル F) 編集 ) 表示 ⑰ お 気 に 和 AO ツール (D へ JI プ ⑪ 


②・ の 6 固 較 人 ぬ め の 均 sm 


Firefox 1.0 
放し に あさ を 指定 する - Mozilla Firefox E 
アイ ル 編集 D 表示 ⑰ 物 動 ⑬ プッ 2 マー ク B) ツー ル D AU プ ⑪ 5 


重 - 字 ・ 紅 人 の 0omw 加 


末 が オリ ジ ナ ル サ イ ズ (100px X100px) 


select 要 素 : 
選 項 目 








※ 中 央 が オリ ジ ナ ル サ イ ズ (100pxX100py) 






Sa ね が 
克 5-mac 
圧 4-mac 


sslsct 要 素 : 
ir = = 
inpu 要 素 : 

jnput 要 素 有 カ SKK 
textarea 要 素 : 


textarea 要 素 : 





ボッ クス の 構造 





マー ジン : margin 


ボ 
2 
必 
ス 
の 
設 
定 
を 
す 
る 


高き : height 

















し aw 」 





2 ル の ( 


Moz 罰 a 
リル, 
6.X 


人 





width プロ パテ イィ と height プロ パテ ィ は 、 内 容 を 表示 する 部 分 の 幅 と 高 さ を 設定 し ます 。 
プ ブロック レベ ル 要 素 と 置換 要素 (img や input、textarea、select な ど ) の 他 、 横 列 と 横 列 
グル ー プ (r ・thead ・tbody ・tfoot) を 除く テー ブル 関連 要素 に 対し て 指定 で きま す 。 % 
で 指定 する 場合 は 、 そ の ボッ クス を 含む ボッ クス の 幅 また は 高 さ に 対す る 割合 に な り 
ます 。 値 と し て 「auto] を 指定 する と 状況 に 応じ て 自動 的 に 調整 され ます が 、 置 換 要 素 
の 場合 に は 本 来 の 幅 や 高き に な り ま す 。 

な お 、Windows 版 の mtemet Explorer 5.5 まで と Internet Explorer 6.0 の 互換 モー ド で は 、 
内 容 の 周り の 空間 と 枠 線 も 含ん だ 範囲 に 対し て 幅 や 高き が 設定 され て し まい ます の で 、 
注意 し て くだ きい 。 


間 間 ーー 


【cSS】 
img.sma1] ({ width: 50px: height: 50Opx ) 
1mg.norma] { width: auto: height: auto )} 
img.1arge  { width: 200px: height: 200px } 
-ha1f ( 

width: 50%: 

co1or: #EFFFfFFff: 

background: #EF3300 
} 


【HTML】 

<D> 

※ 中 央 が オリ ジ ナ ル サ イ ズ (100px X 100px) 

く /p> 

<Dp> 

< く 1mg Sro="orange .]p9d" a1t="" class="Sma]11"> 
<img Sro="orange.]Jpg" a1t="" class="norma] "> 
< く 1mg Sro="orange.]p9d" a1t="" class="1arge"> 
く /p> 


<h エ > 


<p class="ha1fF"> 

これ 以下 の サン プル で は 、 要素 の 幅 (width) を 「50*」 に 設定 し て いま す 。 
く /p> 

<D> 

select 要素 : <br> 

<selec class="ha1f"> 

<option selected> 選択 項目 1</option> 

<option> 選択 項目 2</option> 

</ se1ect> 

</p> 

< く D> 

input 要素 : <br> 

<input type="text" class="ha1F" va1ue=" 人 力 フ ィ ー ル ド "> 
く /p> 


ぐ D> 
textarea 要素 : <br> 

<textarea rows="5" col1s="30" class="ha1f"> 
複数 行 の 人 力 フ ィ ー ル ド 

</textarea> 

く /p> 


⑫ HTML : TIPS「 新 し い ブ ラウ ザ は <!DOCTYPE> の 書き 方 で 表示 が 変わ る ! 」 (P.9) 


Internet Explorer の 幅 と 高 さ の 適用 範囲 に 注意 ! 

左 ペ ー ジ の 解説 に も 書き まし た が 、Windows 版 の Internet Explorer 4.0-5.5 
と 6.0 の 互換 モー ド で は 、width プロ パテ ィ と height プロ バテ ィ の 適用 され る 範囲 
が 標準 的 な 仕様 と は 異な っ て いま す 。 具体 的 に は 、 本 来 は ボッ クス の 内 容 部 分 の 幅 
や 高 さ を 設定 する は ず の も の が 、Internet Explorer で は 枠 線 と 内 容 の 周り の 空間 
も 含ん だ 領域 の 幅 や 高 さ と し て 設定 され ます 。 特 に ボッ クス の 枠 線 を 太く し た り 内 
容 の 周り の 空間 を 広く と っ て いる 場合 に は 、 正 し い 表 示 を する ブラ ウザ と は 全然 違 
う 表示 結果 と な り ま す の で 、 注 意 し て くだ さい 。 


ボッ クス の 構造 


マー ジン : margin 





仕様 上 の 高き : IE の 高 さ : 
height height 





仕様 上 の 幅 : width 
上 E の 幅 : width 








/ 須 / 


胃 引 着 


77e7ox 
oz 
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写 


OpeyaZ 
Opera6 


回 
回 回 


EJC//』 
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左右 へ の 配置 と 回 り 込み を 指定 する 


float: 下 計 位 半 





ire7ox 


MMoz/a 配置 位置 left ・right ・ none 


リリ ル 1 Internet Explorer 6.0 





カク レク マ ノ ミ は 、 クマ の 中 で も 中 さ 
く て と て も か わい い 種 類 で す 。 ふ わ ふ 
わ と し た カー ベッ ト の よう な 触手 の ある 
ハタ ゴイ ソ ギ ンチ ャ ク が 大 好き で 、 い 
し つも 気持 ちよ さそ うに 寄り 添っ て いま 
す 。 最近 は 、 水 替え の 必要 の な い フ ィ 
ルター な ども 発売 され て いま す の で 、 以前 に くら べ る と 飼育 も 楽 
に な り ま し た 。 また 、 様々 な 付着 生物 が 生き た まま 付い て いる 
工 殖 礁 の 岩 を 入れ て お く < こ と で 、 さら に 水槽 内 の 環 } 
よう で す 。 この 岩 は 、 ライ ブロ ッ ク と 呼ば れ て お り 、 現 
海外 か ら 輸 入 さ れ た も の が 販売 され て いる よう で す 。 





















191 つ (いる 














カク レク マ ベ は 、 クマ バ ベ の 中 で も | さ 
く て と て も か わい い 種 類 で す 。 ふ わ ふ 
わ と し た カー ベッ ト の よう な 触手 の ある 
ハタ ゴイ ソ ギ ンチ ャ ク が 大 好き で 、 い 

つも 気持 ちよ さそ うに 寄り 添っ て いま 

す 。 最近 は 、 水 替 え の 必要 の な い フ ィ 
ルター な ども 発売 され て いま す の で 、 以前 に くら べ る と 
に な り ま し た 。 また 、 様々 な 付着 生物 が 生き た まま 付 り 
殖 敬 礁 の 岩 を 入れ て お < く こ と で 、 さら に 水槽 内 の 環境 ) 
よう で す 。 こ の 者 は 、 ライ ブロ ッ ク と 呼ば れ て お り )、 現 
海外 か ら 輸入 され た も の が 販売 され て いる よう で す 。 




















カク レク マ ノ ミ は 、 クマ ノミ の 中 で も 小さ く て 
と て も か わい い 種 類 で す 。 ふわ ふわ と し た 
カー ペッ ト の よう な 触手 の ある ハタ ゴイ ソ ギ 
ンチ ャ ク が 大 好き で 、 いつ も 気持 ちよ さそ 

本 還 請 譜 に 寄り 添っ て いま す . 最近 は 、 水 替え の 

必要 の な い フ ィ ル ター な と や 発売 され て い 
ます の で 、 以前 に くら べ る と 飼育 も 楽に なり まし た 。 また 、 様々 な 付着 
生物 が 生き た まま 付い て いる 瑞 区 礁 の 岩 を 入れ て お く こと で 、 さら に 
水槽 内 の 環境 が 良く な る よう で す 。 こ の 岩 は 、 ライ ブロ ッ ク と 呼ば れ 

て お り 、 現在 で は 主 に 海外 か ら 輸 入 さ れ た も の が 販売 され て いる よう 
で す 。 
























カク レク マ ノ ミ は 、 クマ ノミ の 中 で も 小さ 
と て も か わい い 種 類 で す 。 よわ ょ わ と し た 
カー ペッ ト の よう な 骸 手 の ある ハタ ゴイ ソ ギ 
ンチ ャ ク が 大 好き で 、 いつ も 気持 ちよ さそ 
うに 寄り 添っ て いま す 。 最近 は 、 水 替え の 
必要 の な い フ ィ ル ター な と や も 発売 され て い 
ます の で 、 以前 に くら べ る と 鯛 育 も 楽に な か り ま し た 。 また 、 様々 な 付着 
生物 が 生き た まま 付い て いる 瑞 区 礁 の 岩 を 入れ て お く こと で 、 さら に 
水槽 内 の 環境 が 良く な る よう で す 。 こ の 岩 は 、 ライ ブロ ッ ク と 呼ば れ 

て お り 、 現在 で は 主 に 海外 か ら 輸 入 され た も の が 販売 さて て いる よう 
で す 。 
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float プロ パテ ィ は 、 指 定 し た 要素 を 左 ま た は 右 に 配置 し て 、 そ の 反対 側 に 後に 続く 要 
素 を 回 り 込 ませ ます 。 

left は 指定 し た 要素 を 左 に 、right は 右 に 配置 し ます 。none を 指定 する と 左右 へ の 配置 
と 回 り 込 み は 行 いま せん 。 

り 込 み を 指定 し た 後に それ を 解除 する た め に は 、clear プロ パテ ィ を 利用 し ます 。 
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【csS】 

img.1eft { 
E1oat: 1eft: 
margin-right: 0.8em: 
margin-bottom: 0.5em 

} 

img.right 【 
FE1oat: r1ght : 
margin-]eft: 0.8emz 
margin-bottom: 0.5em 

} 

p { 
clear: both: 
1ine-height: 1.4 

} 


【HTML] 
< く D> 
<1mg src="fish1 .]pg" cl1ass="1eft" width="155" height="120" a1t=""> 
カク レク マ ノ ミ は 、 ク マ ノ ミ の 中 で も 小さ く て と て も か わい い 種 類 で す 。 ふわ ふわ と し た カー ペッ 
ト の よう な 触手 の ある ハタ ゴイ ソン ギン チャ ク が 大 好き で 、 い つも 気持 ちよ さそ うに 寄り 添っ て い 
ます 。 最近 は 、 水 替え の 必要 の な い フ ィ ル ター な ども 発売 され て いま す の で 、 以前 に くら べ る と 
飼育 も 楽に な かり まし た 。 ま た 、 様 々 な 付着 生物 が 生き た まま 付い て いる 五 殖 礁 の 震 を 人 人 れ て お く 
こと で 、 さら に 水槽 内 の 環境 が 良く な る よう で す 。 こ の 岩 は 、 ラ イブ ロッ ク と 呼ば れ て お り 、 現 
在 で は 主 に 海外 か ら 輸 和信 され た も の が 販売 され て いる よう で す 。 

く /p> 

<D> 

<1img sro="fish2.]pg" class="right" w1dth="155" height="120" a1t=" "> 
カク レク マ ノ ミ は 、 ク マ ノ ミ の 中 で も 小さ く て と て も か わい い 種 類 で す 。 ふわ ふわ と し た カー ペッ 
ト の よう な 触手 の ある ハタ ゴイ ソ ギ ンチ ャ ク が 大 好き で 、 い つも 気持 ちよ さそ うに 寄り 添っ て い 
ます 。 最近 は 、 水 替え の 必要 の な い フ ィ ル ター な ども 発売 され て いま す の で 、 以前 に くら べ る と 
飼育 も 楽に な お り ま し た 。 ま た 、 様 々 な 付着 生物 が 生き た まま 付い て いる 敬 理 礁 の 岩 を 人 人 れ て お く 
こと で 、 さら に 水槽 内 の 環境 が 良く な る よう で す 。 こ の 岩 は 、 ラ イブ ロッ ク と 呼ば れ て お り 、 現 
在 で は 主 に 海外 か ら 輸 人 され た も の が 販売 され て いる よう で す 。 
< く /D> 
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圧 5-mac 
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5a7a// 
圧 5-mac 
放 4-mac 


aw 用 


の ie 江 中 S 了 半 (e 





回 り 込 み を 解 陸 す る 


clear: どちら 委 の 愛 素 に 対し て 解 座 する か 





【 と ちら 側 の 要素 に 対し て 解除 する か 】 
left 左側 の 要素 に 対す る 回 り 込み を 解除 
right 右側 の 要素 に 対す る 回 り 込 み を 解除 
both 両側 の 要素 に 対す る 回 り 込み を 解除 
none 回 り 込み を 解除 し な い 


















アイ ル (CE) 編集) 
・ の 回 中 の | の 


カク レク マ バ ベ は 、 クマ 
さく て と て も か わい い 種 下 " 
ぶ わ と し た カー ベッ ト の よ う 夫 手 の 
ある ハタ ゴイ ソ ギ ンチ ャ ク が 大 好き 
で 、 いつ も 気持 ちよ さそ うに 寄り 添っ 
て いま す 。 








最近 は 、 水 替え の 必要 の な い フ ィ ル ター な ども 発売 され て いま 
す の で 、 以前 に くら ぺる と 飼育 も 楽に な り ま し た 。 





カク レク マ ベ は 、 クマ ペ の 中 で も 小 
さく て と て も か わい い 種 類 で す 。 ふわ 
ふわ と し た カー ベッ ト の よう な 箇 手 の 
ある ハタ ゴイ ソ ギ ンチ ャ ク が 大 好き 。 
で 、 いつ も 気持 ちよ さそ うに 寄り 添っ Fiketoxk0 

て いま す 。 回 り 込み を 机 除 する - Mozilla Firefox 

アイ ル ( 編集 表示 移動 ⑪ ブックマーク AG⑪ AI2⑪ 










最近 は 、 水 替 え の 必 要 の な い フ ィ ル ター な ども 発売 さ 
す の で 、 以前 に くら べ る と 飼育 も 楽に な り まし た 。 


カク レク マ ノ ミ は 、 クマ ノミ の 中 で も 小さ て 
と て も か わい い 種 類 で す 。 ふわ ふわ と ょ し た 
カー ペッ ト の よう な 触手 の ある ハタ ゴイ ソ ギ 
ンチ ャ ク が 大 好き で 、 いつ も 気持 ちよ さそ 
うに 寄り 添っ て いま す 。 


最近 は 、 水 替え の 必要 の な い フ ィ ル ター な と や も 発売 され て いま す の 
で 、 以前 に くら べ る と 鯛 育 も 楽に な が り ま し た 。 


カク レク マ ノ ミ は 、 クマ ノミ の 中 で も 小さ きく て 
と て も か わい い 種 類 で す 。 ふわ ふわ ょ し た 
カー ペッ ト の よう な 骨 手 の ある ハタ ゴイ ソ ギ 
ンチ ャ ク が 大 好き で 、 いつ も 気持 ちよ さそ 
うに 寄り 添っ て いま す 。 


最近 は 、 水 替え の 必要 の な い フ ィ ル ター な と や も 発売 され て いま す の 
で 、 以前 に くら べ る と 飼育 も 楽に が り ま し た 。 
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clear プロ パテ イィ は 、 あ る 要素 を 左 また は 右 に 配置 し て テキ スト な ど を 回 り 込 ませ た 場 
合 の 、 回 り 込 み を 解除 し ます 。 
プロ ッ ク レ ベル の 要素 に 対し て 指定 する こと が で きま す 。 


【CSS】 Moz/a 
img.1eft { 
fl1oat: 1eEt: 
margin-right: 0.8em: 
margin-bottom: 0.5em 
} 
img.right { Opera6 
f1oat: right: 
margin-1efFt: 0.8emz 


margin-botEtom: 0.5em 
) 契 47ac 


Sa ね // 


圧 5-a 


ゆ 大 
clear: Doth: 
1ine-height: 1.4 
} 


【HTML】 
<D> 
<1mg Src="fish1 .]pg" class="1eft" wiQdth="155" heigqht="120" a1t=""> 
カク レク マ ノ ミ は 、 ク マ ノ ミ の 中 で も 小さ く て と て も か わい い 種 類 で す 。 ふわ ふわ と し た カー ペッ ト 
の よう な 夫 手 の ある ハタ ゴイ ソ ギン チャ ク が 大 好き で 、 いつ も 気持 ちよ さそ うに 寄り 添っ て いま す 。3) 
く /p> 

<D> 

最近 は 、 水 替え の 必要 の な い フ ィ ル ター な ども 発売 され て いま す の で 、 以前 に くら べ る と 飼育 も 楽 

に な り ま し た 。 。) 
く /D> 

<D> 

<1mg Sro="Fish2 .]pg" class="r1ght" width="155" height="120" a1t=""> 
カク レク マ ノ ミ は 、 ク マ ノ ミ の 中 で も 小さ く て と て も か わい い 種 類 で す 。 ふわ ふわ と し た カー ペッ ト 

の よう な 角 手 の ある ハタ ゴイ ソ ギ ンチ ャ ク が 大 好き で 、 いつ も 気持 ちよ さそ うに 寄り 添っ て いま す 。4 
く /p> 

く D> 

最近 は 、 水 替え の 必要 の な い フ ィ ル ター な ども 発売 され て いま す の で 、 以前 に くら べ る と 飼育 も 楽 
に な り ま し た 。 由 
</p> 


丸 re7ox 
4 た 


の 上 同 功 9 隊 本 (r 引 癌 





margin-left: auto: margin-right: auto 


margim: auto 
margin: と 大 マー ジン auto 
margim: た マー ジン auto 末 マ ー ジ ン 
※ 上 下 マ ー ジ ン 、 上 マー ジン 、 下 マー ジン に つい て は 任意 の 値 





Internet Explorer 6.0 


色 セン タリ ング する - Microsoft Internet Explorer 


アイ ル (F) 編集 CE) 表示 ) お 気に入り ツー ル ①D ヘル プ ⑧⑬ 


の 回 回 人 @ の ms 宮 5moo 





9 ひる 


2 ルリ アル た た 本 天 HI 


これ ら の 用 法 は 、 プ ロッ クレ ベル 要素 の ボッ クス を セン タリ ング させ る 指定 で す 。 
左 有 の マー ジン の 値 を 「auto」 に 設定 する と セン タリ ング され ます の で 、 上 の 書式 の ど 
れ を 使用 し て も セン タリ ング は 可能 で す 。 プ ロッ クレ ベル 要素 の 内 容 の 行 揃え を 設定 
し た い 場 合 に は 、textalign プロ パテ ィ を 使用 し て くだ さい 。 

な お 、Windows 版 の mtemet Explorer 6.0 の 場合 は 、 標 準 モ ー ド で な けれ ば セン タリ ン 
グ さ れ ま せん の で 、 注 意 し て くだ さい 。 





UE 間 只 ーー ーーーーーーーーーーーー 一 


【cSS】 

h1, p { 
margin-1eF モ : auto: 
も au も O: 7re7fox 
padding: 20px: 7 た 】 


width: 150px: 
} 
table { 
margin: auto 
} 
h1, p, table { 
GOHO:si 介 EEEEE: 
background: #EF6600 
} 


【HTML】 
<h1> これ は h1 要素 で す </h1> 


<p> これ は p 要素 で す 。</p> 


<tab1e border="3" ce11padding="6"> 

<tr><th> ヘッ ダ </th><th> ヘッ ダ </ th><th> ヘッ ダ </ th></ 上 エッ > 
<tr><d> デー タ </ td><d> デー タ </ td><td> デー タ </ 上 d></ て 上 ェ > 
</tab1e> 
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絶対 的 な 位置 に 配置 する 


position: absolute 欠 絶 対 配置 で わる こと を 示す 


top: 放 訂 で 上 か ら の 距離 
bottom: 導 衣 を 下 か ら の 距離 
1eft: 導 で 左 か ら の 距離 
right: 放 施 を 石 か ら の 距離 





距離 単位 付き の 数 値 ・% 


Internet Explorer 6.0 
潮 対 的 な 位置 に 配置 する - Microso 
アイ ル (E) 編集 E) 表示 お 気に入り ⑱ 


の 回 回 の の we 宮 moo 


191Y コ (いる 


給 対 的 な 位置 に 配置 する - Mozilla Firefox 
プイ ル (P) 編集 CE) 表示 (V) 移動 ⑬ ブッ 2 マー の (8) ツー- ル ①D ルプ ⑱⑬ 


を - ゅ -@G の omE_ 


「position: absolute」 と 距離 を 指定 する プロ パテ ィ は 、 指 定 さ れ た 要素 を 絶対 的 な 位置 で 
指定 し て 配置 し ます 。 

この 指定 を する と 、 そ の 部 分 は 通常 の 配置 と は 別に 扱わ れる よう に な る た め 、 他 の 要 
素 の 配置 に は 一 切 影響 と 与 を な く な り ま す 。 top プロ パテ ィ は 親 ボ ックス の 上 か ら 指 定 
し た 要素 の ボッ クス の 上 まで の 距離 、bottom プロ パテ ィ は 親 ボ ックス の 下 か ら 指 定 し 









た 要素 の ボッ クス の 下 ま で の 距離 、left プロ パテ ィ は 親 ボ ックス の 左 か ら 指 定 し た 要素 
の ボッ クス の 左 ま で の 距離 、right プロ パテ ィ は 親 ボ ックス の 右 か ら 指 定 し た 要素 の ボッ 
クス の 右 ま で の 距離 を 指定 し ます 。 


ETI 還 ーーーーーーーー ーー - 


【cSS】 
body { 
color: #000000: 
background: #FEFFFF ur] (grid.qit ) 


⑫: 素 OpeyaZ 
position: abso1ute: Ope/a6 
top: 150px: 
1eft: 250px: 
width: 150px: 
height: 50px: 
margin: 0: 
padding: 25px: 
Font-weight: bo1d: 
co1or: #FEFFff : 
background: #FfF3300 
} 


Sa ね // 
圧 5-ma 
左 4-mac 


【HTML】 
<h1> 絶対 配置 </h1> 


く D> 

上 か ら 150 ピク セル <br> 
左 か ら 250 ピク セル 

< く /p> 
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相対 的 な 位置 に 配置 する 


position: relative 全 相 対 配置 で ある こと を 示す 


top: 産 離 年 上 か ら の 距離 
bottom: 夏 離 年 下 か ら の 距離 
1eft: 産 麻 征 左 か ら の 距離 
right: 路 離 征 石 か ら の 距離 





距離 単位 付き の 数 値 ・% 


ICO9(d991 り (DO い り 


E 放 EzLp73D1 同 . 中 で と う 
プア イル F) 編集 CE) 表示 ⑰) お 気に入り @ 


@ ポ ・ の 回 還る の 時 実 mo 











普通 の 配置 位置 か ら 
相対 的 に 移動 し ます . 







Firefox 1.0 





相対 的 な 位置 に 配置 する 
アイ ル (E) 編集 ) 表示 移動 ⑬ ブッ クマ ー が B) ウー ル ①D ヘル 7⑪ 圭 


和 を - ゅ あの G@ の owa 






Mozilla Firefox 






普通 の 配置 位置 か ら 
朴 的 (に 移動 し ます. 






「position: relative」 と 距離 を 指定 する プロ パテ ィ は 、 指 定 さ れ た 要素 を 本 来 表 示さ れる 
べき 位置 か ら 相対 的 に 移動 させ て 配置 し ます 。 

この 後に 続く 要素 は 、 指 定 さ れ た 要素 が 本 来 の 位置 に 表示 され て いる 場合 と 同様 に 配 
置き され ます 。top プロ パテ ィ は 上 か ら 下 へ 移動 きせ る 距離 、bottom プロ パテ ィ は 下 か ら 
上 へ 移動 させ る 距離 、left プロ パテ ィ は 左 か ら 右 へ 移動 させ る 距離 、right プロ パテ ィ は 
右 か ら 左 へ 移動 させ る 距離 を 指定 し ます 。 


0 


ee 


【cSS】 

年 
Font: bo1d 60px Aria] , sanS-Ser1f: 
text-a1ign: Center: 
marg1n-bottom: 0: 
color: #99cofF: 
background-co1or: #EFEFFF 


p 【 

DoSition: re1a1ve : 

top: -90px: 

font: bo1d 20px "MS P ゴ シッ ク ", Osaka , sans-serif : 
text-a1ign: center: Sa ね // 
mardgin-top: 0: 圧 5-ma 
color: #000000: 克 4-max 
background-co]or: transparen キ t 





【HTML】 
<h1>POSTTTON<Dbr>RELATTVE</h1> 


<p> 普通 の 配置 位置 か ら <br> 相対 的 に 移動 し ます 。</p> 


。 人 efox 
_ MMoz//a 


リル 


_A6.X 











(りり コリ 4 
Opeya6 


Sa ね が 


圧 5-ma 


Het 滞 避 S 陣 本 (て 引 湊 





に よ S」 ル NDL 條 ロト ゴ まっ) 















position: fixed 国定 配置 で ある こと を 示す 
top: 夏 麻 本 上 か ら の 距離 
bottom: 距離 年 下 か ら の 距離 
1eft: 産 離 征 左 か ら の 距離 
right: 夏 麻 へ 石 か ら の 距離 





距離 単位 付き の 数 値 ・% 


9 いる リリ 


へ ルプ (⑪ 


に ら 回 中 る の 昧 大 sm 





ー ( 算 暴 が 黄色 の 部 分 ) は 、 ウィ ンド ウ 
れる た の め タロ フル で 常に 剛 置 に 





「posiion: fixed」 と 距離 を 指定 する プロ パテ ィ は 、 指 定 さ れ た 要素 を 絶対 的 な 位置 に 配 
置 し ます が 、 そ の 要素 は ウィ ンド ウ 上 の その 位置 に 固定 され て 、 ス クロ ー ル し て も t 位 
置 が 変わ らち なく な り ま す 。 

この 指定 を され た 要素 は 、 通 常 の 配置 と は 別に 扱わ れる よう に な る た め 、 他 の 要素 の 
配置 に は 一 切 影響 を 与え を ませ ん 。 top プロ パテ ィ は 親 ボ ックス の 上 か ら 指 定 し た 要素 の 
ボッ クス の 上 まで の 距離 、bottom プロ パテ ィ は 親 ボ ックス の 下 か ら 指 定 し た 要素 の ボッ 
クス の 下 ま で の 距離 、left プロ パテ ィ は 親 ボ ックス の 左 か ら 指 定 し た 要素 の ボッ クス の 
左 まで の 距離 、right プロ パテ ィ は 親 ボ ックス の 右 か ら 指 定 し た 要素 の ボッ クス の 右 ま 
で の 距離 を 指定 し ます 。 


2 





ーー 






【cSS】 
body { 
margin: 3em 0 1em: 
color: #000000: jra 
background: #FFFFFf ur] (grid.g1f ) _Moza 
と 2 
mavi ーーーーー- 
W 
position: fixed : 6.X 
top: 0: 5 
1eft: 0: 
width: 1005 も : 
height: 1em: 
margin: 0: 


padding: 0.5em: 
text-a]1ign: center: 
color: #FFFFfF : 
background: #EFfcc00: 
} 
1 。 め 
margin-]eft: 20px: 
marg1n-right: 20px: 


【HTML】 
<h1> 固定 配置 </h1> 


<Dp> 

上 の ナビ ゲー ショ ン ・ バ ー (背景 が 黄色 の 部 分 ) は 、 ウ ィ ン ド ウ の 上 部 に 固定 され る た め 、 ス ク Re 
ル し て も 常に 同じ 位置 に 表示 され ます 。 

< く /p> 


<div 1d="navi"> 

<a href="prev.htm1 "> 前 </a> 

<a href="home.htm1"> トッ プ </a> | 
<a href="next .htm1 "> 次 </a> 

< く /d1 マ > 
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OpeyaZ 
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Sa7g// 
だ 5-mac 





z-index プロ パテ ィ は 、 絶 対 配置 や 相対 配置 され て いる 要素 の 重なる 順序 を 指定 し ます 。 
通常 表示 され る 状態 を 0 と し て 、 値 が 大 きい も の ほど 上 に (重ね られ た 状態 で ) 表 示さ 
れ ま す 。 


EE 制 を 3 コ 


【cSS】 
#sample1 { 
position: abso1ute: 
z-1ndexxi 2: 
top: 130px: 
1eft: 100px: 
width: 130px: 
height: 90px: 
Co1or: #FFFfFfF: 
background-co]1or: #339933 
} 
#sample2 { 
Dos1tion: abso]uEe: 
Z-1ndexr: 1: 
top: 30px: 
1eft: 200px: 
width: 80px: 
height: 280px: 
Co1or: #FFfFfFf: 
background-co1or: #FF3300 


204 


ーー 
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配 
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} 
#sample3 { 
position: absolue: 
z-1nmdexx:i 3: 
top: 200px: 
1efFt: 150px: 
width: 180px: 
height: 50px: 
Color: #FEFfEfFf : 
background-co]or: #333399 
} 
#sample4 { 
position: absolute: 
top: 60px: 
1eft: 50px: 
width: 380px: 
height: 220px: 
color: #000000: 
jackground-co1or: #FfFcc00 
} 
p ( padding: 0.5em } 


【HTML】 

<p 1d="sample1 "> 
gz-1ndex: 2<br> ソー ス 順 : 1 
</p> 


<p 1d="sample2"> 
gz-1ndex: 1<br> ソー ス 順 : 2 
< く /p> 


<p 1d="sample3"> 
z-index:3<br> ソー ス 順 : 3 
</p> 


<p 1d="sample4"> 
g-index 指 定 な し (0) <br> ソー ス 順 : 4 
< く /p> 
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表示 され な いよ うに する 


Internet Explorer 6.0 
当 表示 され な いよ うに する 
アア イル) 編集 ) 表示 ⑰ お 気 に 和 AO ツウ - ル CD へ 7 
@ ゃ ・ の 回 還る た 

この 了 自 沙 の すぐ 下 に 表示 され な い 段 了 痛 が り と つ あ り ま す 。 


Tangay none」 を 指定 し て いま す の で . その 要素 目 体 が な いよ 
うな 状態 に な っ て いま す 。 


Microsoft jpternet Explorer 


この 自 沙 の すぐ 上 に 素 示さ れ ない 段 落 が り と つ あり ます 。 
「vaibilty hdden」 を 指定 し て いま す の で 、 表示 され る 場合 と 同 
じ 寅 域 が 確保 され ます 。 


アイ ル (D 編集 6) 表示 お 気 に AD ツー ル ①D ん M プ ⑬ 

園 人 る の 
この 自 除 の すぐ 下 に 表示 され な いい 段落 が ひと つ あ り ます 。 
「display. nons」 を 指定 し て いま す の で . その 要素 自体 が お いよ 
うな 状態 に な っ て いま す 。 


に 「disply: nons」 を 指定 し て 表示 され な いよ うに し て 
ます 


ヘッ ダ 
段落 は 、「viibilty。 hidden」 を 指定 し て 表示 され な いよ うに 
いま す 。 
この 妥 沙 の すぐ 上 に 表示 され な い 自 到 が ひと つ あ り ます 。 


「visibilty MR て いま す の で 、 表示 され る 場合 と 同 
じ 語 域 が 確保 され ます . 
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表示 され な いよ うに する - Mozilla Frefox 


れ な い 段 了 族 が ひと つ あ り ま す 。 「disply: 
nonc」 を 指定 し て いま す の で 、 その 要素 自体 が な い 、 よう な 状態 に 
な っ て いま す 。 


この 段 際 の すぐ 上 に 表示 され な い 段 抗 が ひと つ あ り ま す 。 
「visbilty: hidden」 を 指定 し て いま す の で 、 表示 され る 場合 と 同じ 領 
域 が 確保 され ます 。 


この 段落 の すぐ 下 に 表示 され な い 段 落 が ひと つ あ り ます 。 「dlsply: 
none」 を 指定 し て いま す の で 、 その 要素 自体 が な いよ うな 状態 に 
な っ て いま す 。 


この 段 族 は 、 「display: none」 を 指定 し て 表示 され な いよ うに し て いま 





に > タ ト 

















この 段落 は 、「xisibility: Hidden」 を 指定 し て 表示 され な いよ うに し て 
いま す 。 


この 段落 の すぐ 上 に 表示 され な い 段 落 が ひと つ あ り ます 。 


「wisibilty: Hidden」 を 指定 し て いま す の で 、 表示 され る 場合 と 同じ 領 
域 が 確保 され ます 。 


すべ て を 表示 させ た 状態 





これ ら の 用 法 は 、 指 定 さ れ た 要素 が 表示 され な いよ うに し ます 。 








「display:none」 を 指定 する と ボッ クス その も の が 生成 され な く な り 、 





あたかも その 要素 


が な いよ うな 状態 に な り ま す 。 [yisibility: hidden を 指定 する と 、 その 要素 の 表示 領域 


は 確保 され ます が 、 
り ま す 。 


見 えな い 状態 (つま り 、 


その 要素 が 透明 に な っ た よう な 状態 ) に な 





is 


【cSS) ーー - 
.none ( disp1ay: none } 
.hidden { visibi1ity: hidden )} 
re7ox 
【HTML】 Moz 罰 a 
<p> MZ.X_ 
この 段落 の すぐ 下 に 表示 され な い 段 落 が ひと つ あ り ま す 。 「disp1ay: none」 を 指定 し て いま す 
の で 、 そ の 要素 自体 が な いよ うな 状態 に な っ て いま す 。 還 





く /p> 

<p class="none"> Opeya6 

この 段落 は 、「disp1ay: none」 を 指定 し て 表示 され な いよ うに し て いま す 。 

</p> Sa ね / 
話 5-ma 

<tab1e border="3" ce11padding="4"> /E4-ma 


<tr class="hidden"> 

<th> ヘッ ダ </ th><th> ヘッ ダ </th><th> ヘッ ダ </th> 
< く / 上 エ > 

く キ ヒエ > 

<td> デー タ </ td><td> デー タ </ td><td> デー タ </ td> 
く / 上 テ > 

<tr class="hidden"> 

<td> デー タ </ td><td> デー タ </ td><td> デー タ </ td> 
く / 上 エ > 

</ab1e> 


<p class="hidden"> 
この 段落 は 、「visibi1ity: hidden」 を 指定 し て 表示 され な いよ うに し て いま す 。 
く /p> 


く D> 

この 段落 の すぐ 上 に 表示 され な い 段 落 が ひと つ あ り ま す 。 「visibi1ity: hidden」 を 指定 し て 
いま す の で 、 表示 され る 場合 と 同じ 領域 が 確保 され ます 。 4 
く /p> 


は み 出 る 部 分 の 処理 方 法 を 指定 する 










fre7ox 
My 





visible ボッ クス か ら は み 出 し て 表示 

hidden は み 出 し た 部 分 を 表示 し な い 

Scroll スク ロー ル し て 見 られ る よう に する 

auto 邊 要 に 応じ て スク ロー ル で きる よう に する 


Internet Explorer 6.0 HOO SR 


@) ブッ 2 マー の ⑧ ツ - ル ⑪D AZ⑳ 9 


アイ ル B @ 移動 
を. ゅ .@96 の 6owe  ] 


入り 切ら な い 場 合 に 、 その 
部 分 を どの よう に 表示 する 
か を 設定 する プロ パテ ィ で 
す 。 





overflow プロ パテ ィ は 、 内 容 が ボッ クス に 入り 切ら な い 場 合 に 、 そ の 部 分 を どの よう 
に 処理 する か を 指定 し ます 。 

この プロ パテ ィ は 、 プ ロッ クレ ベル 要素 と 置換 要素 (img や input、textare、select など ) 
に 対し て 指定 する こと が で きま す 。 


| Samnpl 


【cSS】 
body { margin: 1.5em } 
#sample1 { overE1ow: scro11 } 
#sample2 { overE1ow: auto } 
#samp1e3 { overE1ow: hidden } 
#sample4 { overE1ow: visib1e } 
p { 

width: 180px: 

height: 70px: 


wtN 同 夢 ら 隊 本 (て 引 湊 上 


200 





1ine-height: 1.5: 
co1or: #000000: 
background: #FFcc00 
} 
em { 
Font-style: norma]: 
Font-weight: bo1d: 
Fon-size: 1arde: 
co1or: #FFO000: 
background: Eransparen ヒ 
} 


の / 


【HTML】 Opeya6 
<Dp 1d="sample1 "> 

「<em>overf1ow: scro11</em>」 を 指定 し て いま す 。 
overE1ow は 、 内 容 が ボッ クス の 中 に 入り 切ら な い 場 合 に 、 その 部 分 を どの よう に 表示 する か を ] そい 
設定 する プロ パテ ィ で す 。 

</p> 


Sa7 ね // 


<D 1d="sample2"> 

「<em>overE1ow: auto</em>」 を 指定 し て いま す 。 

overf1ow は 、 内 容 が ボッ クス の 中 に 入り 切ら な い 場 合 に 、 その 部 分 を どの よう に 表示 する か を 
設定 する プロ パテ ィ で す 。 4 
</p> 


<p 1d="samp1e3"> 

「<em>overE1ow: hidden</em>」 を 指定 し て いま す 。 

overf1ow は 、 内 容 が ボッ クス の 中 に 入り 切ら な い 場 合 に 、 2 
設定 する プロ パテ ィ で す 。 

</p> 


<p 1d="sample4"> 

「<em>overE1ow: visib1e</em>」 を 指定 し て いま す 。 

overF1ow は 、 内 容 が ボッ クス の 中 に 入り 切ら な い 場 合 に 、 その 部 分 を どの よう に 表示 する か を 
設定 する プロ パテ ィ で す 。 内 
く /p> 
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| 

none 

disc 

Circle 

Square 
lowerrroman 
UPDer-「Oman 
lower-greek 
decimal 
decimal-leading-zero 
lower-latin 
lower-alpha 
Upper-latin 
UPDer-alpha 
CjK-ideographic 
hiragana 
katakana 
hiragana-iroha 
katakana-iroha 
hebrew 
armenian 
geOrgian 
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イル 功 ⑰) 表 示 Q お % に AO⑯ ウー ル GD へ 4209 


リス ト の マー ク や 番号 の 形式 を 変え る 
Hist-style-type: 竹 着 






表示 し な い 
塗り つが され た 丸 (初期 値 ) 
線 で 描か れ た 丸 
線 で 描か れ た 四角 
ロー マ 数 字 の 小文字 
ロー マ 数 字 の 大 文字 
ギリ シャ 文字 の 小文字 
算 用 数 字 
頭 に 0 を 付け た 算 用 数 字 
アル ファ ベッ ト の 小文字 
アル ファ ベッ ト の 小文字 
アル ファ ベッ ト の 大 文字 
アル ファ ベッ ト の 大 文字 
漢 数 字 
ひら が な で 「 あ いう え お 」 順 
カタ カナ で 「 ア イ ウ エ オ 」 順 
ひら が な で 「 い ろ は 」 順 
カタ カナ で 「 イ ロ 八 ] 順 
へ ヘブライ 数 字 
アル メニ ア 数 字 
グル ジア 数 字 

9 いき 上り 


アイ ん ) 寺本 ⑰ 表地 示 め プ >23ー2B) ウー 


年 - ラ - 錠 の の om 





⑳a を の. 回 條 の の as 太 mop 




















Hist-style-ypc は 、 リ スト の マー ク や 番号 の 形式 を 設定 し ます 。 
list-style-image プロ パテ ィ で 画像 が 指定 され て いる 場合 に は 、 そ の 画像 が 優先 し て 表示 
され ます 。 


ミミ ee 


u] { 1igt-sty1e-type: diso } 





リス ト の アク セ シ ビ リティ 
音声 ブラ ウザ な ど で リ スト が 表現 され る 場合 、 リ スト に 番号 が 付い て いる と 、 各 
項目 の 区 切り が 明確 に な っ て わか りや すく な り ま す 。 し か し 、 そ の 場合 で も リス ト 
が 入れ 子 に な っ て いる (リス ト の 中 に さら に リス ト を 入れ る ) と 、 逆 に 混乱 する 可能 
性 も あり ます 。 リ スト は 一 般 的 に その 階層 を イン デン ト で 表現 し ます が 、 そ れ が 見 
えな い 場 合 に は 階層 が 変化 し て いる こと を 認識 で き な い た めで す 。 

CSS8 の 仕様 で は 、「1.1」「1.2」 「1.3]」 の よう に 番号 で 階層 を 示す 方 法 も 提供 さ 
れ て いる の で す が 、 ほ と ん どの ブラ ウザ は まだ 対応 し て いま せん 。 現状 で は 、 音声 
で も リス ト の 階層 が わか る よう に する た め に は 、 各 項目 の 内 容 自体 を 工夫 する か 、 
音声 用 に 各階 層 の 始め と 終わ り が わか る よう な 目印 を 入れ る (通常 は 「display: none」 
で 表示 させ な いよ うに する ) な どの 対処 が 必要 に な り ま す 。 現実 的 に 考え る と 、 リ ス 
ト は で きる だ け 単 純 に し て 、 入 れ 子 に する こと は 避け た ほう が よい で し ょ う 。 


Sa ね // 
話 5-mac 
左 4-mac 











1ist-style-image: ur1( Or) 


URL 画像 の URL 





Internet Explorer 6.0 






講 リ スト の マー ク を 画 人 多 に する - Microsoft lnternet Explorer 。 | 了 区 
アイ ル F) 編集 表示 お 気に入り ⑯) ツー ル (D ヘル プ ⑪ 


の 回 回 人 の の we 支 awop 





















至 hist-stylc-image 
ま list-stylc-image 
到 list-stylc-image 





Firetox 1.0 










リス ト の マー ク を 画 銀 に する 


アイ ル C⑥ 軸 入 6) 表示 移動 ⑩ フッ クー ク ⑧) ツー ル D AMZ 8 


DI 


KEIIFNIT3TTI 














hst-stylc-image 
到 list-stylc-image 
到 ist-styic-image 


list-style-image プロ パテ イィ は 、 リ スト の マー ク と し て 表示 させ た い 画 像 を 指定 し ます 。 
lisLstyle-type プロ パテ ィ が 同時 に 設定 され て いる 場合 で も 、 画 像 が 優先 し て 表示 され 
ます 。 


ETUC 提 Lu 


【cSS】 
ul1 { 
11gt-sgty1e-image: ur1(star.g1f) : 
font: ]arge "Times New Roman", Times, serif 


【HTML】 

<u1> 
<11>]1igs 上 -style-imade</]11> 
<11>11s ヒ -sty]1e- image</ ユ 1> 
<11>11s 上 -sty]e-1mage</]1> 
く /u1> 


y 還 





リス ト の マー ク を 内 側 に 表示 させ る 
1ist-style-position: 表示 位 計 


outside マー ク を 外側 に 表示 (初期 値 ) 
inside マー ク を 内 側 に 表示 





Internet Explorer 6.0 191C3( 〇 の.9 


リス ト の マー ク を 内 個 に 表示 させ る 
アイル) 編集 アイ ル (編集) 表示 移動 6 
全 - 呈 の 9 の omw 
* inside の 場合 、 
りょう に 表示 3 Sa ね 7/ 


話 5-mac 


語 計 
リ 
ス 
ト 
の 
上 
を 
す 
る 


この よう に 表示 され ます 。 
・ inside の 場合 、 
この よう に 表示 され ます 。 


putside( 初 期 値 ) で は 
この よう に 表示 され ます 。 
cutside( 初 期 値 ) で は 
この よう に 表示 され ます 。 





list-style-position プロ パテ ィ は 、 リ スト の マー ク を リス ト 項 目 の 表 示 領 域 の 外側 に 表示 
する か 、 内 側 に 表示 する か を 指定 し ます 。 


EE 間 隊 ーー 


【cSS】 
.1n { 11igt-gty1e-pogition: nside } 
em { 
color: #FfF3300: 
background-co]or: #EFFFfFf: 
Font-sty1e: norma] : 
Font-weight: bo1qd 





【HTML】 
<u] class="1n"> 
<11><em> ns1de</ em> の 場合 、<br> この よう に 表示 され ます 。 


</11> 

<11><em> ins1de</ em> の 場合 、<br> この よう に 表示 され ます 。 

</11> 

く /u1> 

<u1> 

<1i><em>outside</ em> (初期 値 ) で は 、<br> この よう に 表示 され ます 。 
</11> 

<1i><em>outside</ em> (初期 値 ) で は 、<br> この よう に 表示 され ます 。 
</ ユ 1> 


< く /u1> 





77e7ox 
27】 
リリ リル 
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話 5-mac 
話 4-mac 








リス ト の マー ク を まとめ て 指定 する 


叶 8 0 


IO で U【UtddWU 


も 指定 で きま す 。 も 指定 で きま す - 
到 list-style-type の 値 は | 衣 jist-style-type の 値 は 、 
画像 が 表示 され な しい 場合 画像 が 表示 され な 場合 
(に 利用 され ます 。 1 に 利用 され ます 。 


衣 list-style-position の 1 衣 jist-styje-position の 
値 も 指定 で きま す 。 こ の 値 も 指定 で きま す 。 こ の 
例 で は . insids で す 。 例 で は 、inside で す 。 


これ ら の プロ パテ ィ は 、 リ スト の マー ク に 関連 する プロ パテ ィ の 値 を まとめ て 指定 し 
0 

必要 な 値 を 任意 の 順序 で 半角 スペ ー ス で 区 切っ て 指定 し ます 。 値 と し て 「none」 を 指定 
する と 、 マ ー ク が 表示 され な く な り ま す 。 


| Samnlc 請 還 II 


【cSS】 
上 
font-s1ze: 1]ardge: 
11s 上 st 上 y1e: ur1(gtar.giE) diso inside 
i 
11 { margin-botEom: 1em } 


【HTML】 

<u]> 

<1i> 

1ist-sty1e-image の 値 <br> も 指定 で きま す 。 

</ ユ > 

< ユエ > 

1ist-sty1e- て ype の 値 は 、<br> 画像 が 表示 され な い 場 合 <br> に 利用 され ます 。 
</11> 





<11> 
1ist-sty1e-position の <br> 値 も 指定 で きま す 。 この <br> 例 で は 、 inside で す 。 
</ ユ > 


< く /u1> 


表 の 線 を 単 一 の 線 に する 


collapse 


separate 表 の 外 枠 や 各 セル の 枠 を 別 | 表示 





ICO がり 【 り コリ 


当 表 の 要 線 を 単 一 の 線 


Ope/aZ 


DE 6 


safa 






9 いる きり 










表 の 枠 線 を 単 一 の 線 に する - Mozilla Firefo 回 回 区 
ファ イル ⑤ 編集) 表示 。 DO EZxaz ッ ー ル D KC) な 








border-collapse プロ パテ ィ は 、 表 の 外 枠 や 各 セ ル の 枠 線 を 重ね て ( 単 一 の 線 と し て ) 表示 
する か 、 別 々 に 表示 する か を 指定 し ます 。 
この プロ パテ ィ は 、table 要素 に 対し て の み 指 定 で きま す 。 


EYELHRT ト KK キサ キヤ サキ ヤキ サナ V く ーー 


【cSS】 
tab]1e#sample] { border-co11apse: co11apse } 
table#samp1e2 { border-co11apse: separate } 








tab1e, th, td { border: 3px so1id #999999 } 
ER { 

co1or: #000000: 

background-Co]1or: #CCCCCc 





ER 0D 

妃 re7ox caption{ 

oz Font-sgize: 1ardge: 

| MZX Font-weight: bo1d: 
color: #EF3300: 
background: ransparen キ 上 

} 





















Opera ア 
【HTML】 

<tab1e border="3" ce11padding="8" 1d="sample1"> 
<caption>co]11apse</caption> 

<tr><th> ヘッ ダ </th><th> ヘッ ダ </th><th> ヘッ ダ </th></ 上 エ > 
<tr><td> デー タ </ td><td> デー タ </ td><Ed> デー タ </ td></ て > 
< 上 エ ><d> デー タ </ td><td> デー タ </td><td> デー タタ </ td></ 上 了 > 
</ tab1 e> 


Opeya6 


Sa 刀 // 


<tab1e border="3" ce11padding="8" 1d="sample2"> 
<caption>separate</caption> 

<tr><th> ヘッ ダ </ て th><th> ヘッ ダ </ て th><th> ヘッ ダ </ th></ 上 エ > 
<tr><td> デー タ </ モ td><td> デー タタ </ 上 d><d> デー タ </ 上 d></ 上 エ > 
<tr><td> デー タ </td><td> デー タ </ td><td> デー タ </td></t 上 エ > 
</tab1e> 


セル 同士 の 異な る 枠 線 が 重なっ た 場合 の 優先 順位 は ? 

border-collapse プロ パテ ィ の 値 を 「collapse] に する と 、 表 の 枠 線 が 重なっ て 
単 一 の 線 と し て 表示 され ます が 、 も し 太 さ や 形式 な どの 異な る 枠 線 が 重なっ た 場合 
に は どの よう に 表示 され る の で し ょ うか ? CSS ら の 仕様 で は 、 異 な る 種類 の 枠 線 
が 重なっ た 場合 の 表示 の 優先 順位 を 以下 の よう に 規定 し て いま す 。 


1. border-style プロ パテ ィ の 値 が 「hidden] の も の は 最 優先 され る 


ら . border-style プロ パテ ィ の 値 が 「none] の も の は 優先 度 が も っ と も 低い 
3. 「hidden」 と 「none」 以外 が 指定 され て いる 場合 、 よ り 太 い 枠 線 が 優先 され る 。 
太 さ が 同じ で 形式 が 異な る 場合 の 優先 順位 は 、 以 下 の 通り (優先 度 が 高い 順 ) 


doub1e+ so1idーdashedー dotted 一 ridge で outse ヒ ーー groove で nse ヒ 上 


4. 枠 線 の 太 さも 形式 も 同じ 場合 の 優先 順位 は 、 以 下 の 通 り (優先 度 が 高い 順 ) 


th 要素 ・td 要素 一 tr 要素 一 thead ・tbody ・tfoot 要 素 ー co1 要素 一 co1group 
要素 - tab1e 要素 


セル と セル の 間隔 を 指定 する 
border-Spacing: 言 大 





ef を 
間隔 単位 付き の 数 値 


91G 〇 の すり 


アイ ル (⑦ 引 集 5) 表示 移動 ⑩ プッ ー ク B) ウー- ル CD AM プ 2 登 


年 - ゆ - 令 @ の om 区 


に 


Internet Explorer 6.0 


請 セル と セル の 間隔 を 指定 する - Microsoft inernet Explorer 
イル) 舞 集 ) 表示 お気 に 入 D⑯ ツー ル ①D へ ルプ 


@ 呈 の 回 国人 の の 時 実 5mOp 


三 








OperaZ 
Opera6 





border-spacing プロ パテ ィ は 、 隣 接する 各 セ ル の 枠 線 と 枠 線 の 間隔 を 指定 し ます 。 
値 は 半角 スペ ー ス で 区 切っ て ふた つ 指 定 す る こと も で きま す が 、 与 えら れ た 値 の 個数 
に よっ て 次 の よう に 設定 され ます 。 


・ 値 が 1 つの 場合 値 1 上下 左右 の 間隔 


・ 値 が 2 つの 場合 値 1 一 左右 の 間隔 値 2 上 下 の 間隔 





ECDD 逢 - 


【cSS】 
tabl]e { border-spacing: 1em } 
table, th, d { border: 3px so1id #999999 } 
th 【{ 
color: #000000: 
background-co1or: #Cccccc 
} 


の "He 守 吉 ら 池 上 


【HTML】 

<table border="3" ce11padding="8"> 

<tr><th> ヘッ ダ </th><th> ヘッ ダ </ th><th> ヘ ツ ダ </ th></ エ > 
<tr><td> デー タ </ td><td> デー タ </ td><td> デー タ </ td></ モ エッ 
<Er><d> デー タ </ td><td> デー タ </ td><td> デー タ </ td>< / 上 > 
</tab1e> 


還 7 


7e7ox 
Moza 


Internet Explorer 6.0 
FE. リ ルレ 9)2 導 ほぼ も ささ) 
イル) 編集 


の 回 還 め 
caption-eide- bottom 


トリ た) 
圧 5-m 























caption-side プロ パテ ィ は 、 表 の タイ トル (capiion 要素 ) の 表示 位置 を 指定 し ます 。 
ltop」 を 指定 する と 表 の 上 に 、「bottom」 を 指定 する と 表 の 下 に 表示 し ます 。 仕様 上 は 「left」 
と 「right」 も 指定 で きま す が 、 正 し く 対 応 し て いる プラ ウザ は ほとん ど な い よう で す 。 


es 


【cSS】 

caption { 
caption-s1de: bottom: 
Font-size: 1arde: 
font-weight: bo1d: 
color: #FF3300: 
background: transparen 

} 

tab1e, th, td { border: 3px so11d #999999 } 

過 破 基 
co1or: #000000: 
bacikground-co1or: #Coccoo 


【HTML】 

<tab1e border="3" ce11padding="8"> 
<caption>capEton-side: Dottom</caption> 

<tr><th> ヘッ ダ </ て th><th> ヘッ ダ </th><Eh> ヘッ ダ </ th></ 上 エ > 
<r><d> デー タタ </t 上 d>< 上 d> デー タ </ 上 d><td> デー タ </ 上 d></ 上 エ > 
< 上 ェ ><d> デー タ </ td><td> デー タ </ td><td> デー タ </ 上 d>< / 上 エッ 
</tab1e> 









IS 
太 re7ox 


EEE SUS 『 Moz/a 
ITUG い tt り (OO まい リ 
空 の セル の 社 線 の る ft mte x ゃ る - Mozi 





empty-cells プロ パテ ィ は 、 空 の セル の 枠 線 を 表示 させ る か どう か を 指定 し ます 。 

この 場合 の 「 空 の セル 」 と は 、 内 容 が 空 で も る セル だ け で な く 、visibility プロ パテ ィ の 
値 が 「hidden] に 設定 され て いる モル も 含み ます 。 値 と し て 「show」 を 指定 する と 枠 線 を 
表示 し 、「hide」 を 指定 する と 枠 線 を 表示 し な く な り ま す 。 


ee 


【cSS】 
table, td { border: 3px so11d #999999 } 
td 【 
Font-size: 1ardge: 
Font-weight: bo1d 
} 
td.hide { empty-ce11g: hide } 
td.show { 
empty-ce11s: show: 
border-co]or: #EF3300 


【HTML] 
<tab1e border="3" ce11padqding="8" ce11spacing="8"> 
< ヒエ > 
<td>hide …</ 上 d> 
<td class="hide"></ 上 d> 
く / 上 エ > 
< く ヒエ > 
<td c1ass="Show"></ 上 d> 
< 上 d> show</ 上 d> 
< く / 上 エッ > 
</ tab1e> 





カー ソル の 形 を 指定 する 





形状 auto ・crosshair ・default ・pointer - move ・text ・Wait ・ 
help ・e-reSiZe ・ne-reSiZe ・nW-reSiZe ・n-rBSiZe ・ Se-TeSiZe ・ 
SW-「eSiZ6 ・S-「eSIZG ・W-TeSiZe 

URL カー ソル の URL 





Sa7a/ Windows で の 表示 例 Macintosh で の 表示 例 


圧 5-mac 
放 4-mac 


n-reSiZe Tn-feSize 





トコ で 
crosshair S-reSIZ@e crosshair S-reSize 


default Wr-TeSize default Wr-reSize 
Dointer 6-「eSIZG pointer e-「eSiZe 
move ne-reSize 


text nwr-resize 


text TnW-「eSIZ@e 


wait Se-reSiZe wait Se-「eSize 


十 

NR 

NM 

: moVve ne-「eSIZG 
1 

9 

? 


help SW-「eSIZe 


help SW-「eSize 





cursor プロ パテ イィ は 、 マ ウス な どの ポイ ン テ ィ ン グ デ バイ ス の カー ソル が 、 そ の 要素 の 
上 に ある 時 の カー ソル の 形状 を 設定 し ます 。 

Imternet Explorer 6.0 以降 で は 、 自 作 の カー ソル (|.cur」 ま た は 「.ani」 形 式 ) を 指定 する こ 
と も で きま す 。 


EE 所 製 


code { curgsor: ext } 


>awwsoso 上 








印刷 時 の 改 ペ ー ジ を 指定 する 


page-break-before: alwaySs 
page-break-after: alWaySs 


page-break-before プロ パテ ィ と page-break-after プロ パテ ィ は 、 印 刷 時 に 指定 し た 部 分 
の 前 また は 後 で 改 ペ メー ジ を する よう に 設定 し ます 。 

[page-break-before: always] は 指定 し た 要素 の 前 で 、「page-break-after: always」 は 指定 し 
た 要素 の 後 で 改 ペ ー ジ し ます 。 指 定 で きる 値 と し て は 、 仕 様 上 は 他 に も 用 意 き れ て い 
る の で す が 、 現 在 利用 で きる の は この 値 だ け の よう で す 。 こ の プロ パテ ィ は 印刷 時 に 
の み 有 効 で 、 画 面 表示 に は 影響 を 与え を ませ ん 。 


ET 提 呈 ーー 


h1, tab1e ( page-break-beEore: a1wayBs } 









fre7ox 
2 


He 吉 S 全 S 上 
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Op 」 





字 
の 
他 
設 
を 
す 
る 












要素 の 前 後に テキ スト や 画像 を 入れ る 


要素 名 :before { content: " テ チ スト" } へ 直前 に テキ スト を 入れ る 
素 名 :before { content: url( UE) }) ee 直 前 に 画像 を 入れ る 
要 東 名 :after { content: " テ チ スム" } 人 年 直 後に キス ト を 入れ る 
要素 名 :after { content: ur1( ひ Er)} ee 直 後に 画像 を 入れ る 


※「 要 素 名 ] の 部 分 に は 、「 提 D 名 ] や 「. ク ラス 名 」 も 指定 で きま す 。 







URL 画像 の URL 


1 つい (きい 1 り 【 り て っ まい 


951 いる 
ヨ 更 未 の 前 後に テキ スト や 画像 を 入れ る - Microsoft Interne 
アイ ル (P 編集 (B 表示 お 気に入り Q) ツー ル CD AM プ ⑪ 


GO の 回 回 人 @ の we 吉 Phoo 


要 未 の 前 後に テキ スト や 画 多 を 入れ る - Mozills Firefox 
プイ ル (E) 編集) 表示 W) 移動 ⑬⑤ ブッ ウマ ー ク ⑧) ツー ル ① AZ 8 





内 


仕様 で は 、 文字 と し て 「YA」 を 挿入 する と 、 そこ で 
改行 する よう に な っ て いま す 。 





1 ca 
: そこ で 改行 する よう に な っ て いま す 。 


現状 で は 、 この ブロ バテ ィ に 完全 に 対応 し て いる 


こ 77 
ブラ ウザ は 、 ほとん ど あ り ませ ん 。 人 で コブ ビ 7 に 沈 全 記し 


' る プラ ウザ は 、 ほとん ど あ り ませ ん 。 





「:before」 や [「:after」 は 、「 要 素 名 ] で 指定 し た 部 分 の 直前 また は 直後 に 、 テ キス ト や 画像 
を 挿入 し ます 。 


ED 握 ニー 


【cSS】 
・note:befFore { content: ur1(hand.gif) } 
・warningibeFore ( 
content: "【 注 意 】": 
color: #EF0000: 
background-co]1or: #EFFFfF 
} 
div.info 【{ 
border: dotted 3px #FF9900: 
padding: 0.2em 1.2em 
} 


【HTML】 

<div oc]ass="1info"> 

<D Class="note"> 

仕様 で は 、 文字 と し て 「\A」 を 挿入 する と 、 そこ で 改行 する よう に な っ て いま す 。 

く /p> 

<Dp class="warnind"> 

現状 で は 、 こ の プロ パテ ィ に 完全 に 対応 し て いる プラ ウザ は 、 ほとん ど あ り ま せん 。 
く /p> 

< く /d1 マ > 


2 








私 の 持っ て いる 参考 書 に は . 引用 文 に は 、 カギ カッ コ を 私 の 持っ て いる 参考 書 に は 、「 引 用 文 に は 、 カギ カッ コ を 付 
会 ける と 書か れ て いま す 。 ける 」 と 書か れ て いま す 。 





これ ら の 用 法 は 、 短 い 引用 文 を 示す q 要素 の 前 後に 付け る 引用 符 を 設定 し ます 。 
quotes プロ パテ ィ で 引用 符 と し て 使用 する 記号 を 設定 し 、「q:before -」 と 「q:after -」 の 
書式 で その 引用 符 を q 要 素 の 前 後に 追加 し ます 。 こ の 時 、 デ フォ ルト の 「"」 な どの 引用 
符 は 、 指 定 し た 記号 に 置き 換え られ ます 。 


UI 天 隊 ーー ーー 


【cSS】 
body 【 
mardin: 2em: 
1ine-height: 1.5 
} 
cd ( quotesi "「" "jm ) 
dibefore { content: open-quote } 
Giafter  { content: o1ose-quote } 


【HTML】 

<D> 

私 の 持っ て いる 参考 書 に は 、<q> 引用 文 に は 、 カギ カッ コ を 付け る </q> と 書か れ て いま す 。 
</p> 
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の elN 厨 器 9 圭 S や 上 【 





/ の コメ た 及 / 


折 和 as 


[#ー | は 、CSS の ソー ス の 中 に コメ ント を 入れ て お く 場 合 に 使用 し ます 。 
コメ ント を 入れ 子 に する こと は で きま せん 。 


|Samnlc 王 還 還 


body { marqin: 3em } 
h1 { 
Font-size: medium: 
Col1or: #EFFFffF: 
background: #EF6600 
} 
p { 1ine-height: 1.5 } 





/* 上 下 左右 の マー ジン を 設定 */ 


/* フォ ント サイ ズ を 標準 に */ 
/* 文字 色 を 白 に */ 
/* 育 景色 を オレ ンジ に */ 


に 


* 段落 の 行間 を 通常 の 1.5 倍 に */ 




















































































































azimuth 音 の 聞こ える 横 方 向 の 位置 すべ て の 要素 center O 
background 背景 の 一 括 指定 すべ て の 要素 個別 に 参 昭 Xx ら 236 
pyad 音像 の 固定 配置 すべ て の 要素 scrol x 234 
background-color 育 景色 すべ て の 要素 transparent x 224 
background-image 背景 画像 すべ て の 要素 none X らら 2 フ 7 
backgroundHposhion 背 二 画 像 の 表示 位置 ーー クル owow x gaa 
background-repeat 背景 画像 の 並び 方 すべ て の 要素 repeat X ら 830 
border 枠 線 の 一 括 指 定 すべ て の 要素 個別 に 参照 X ら 47 
bordercollapse セル の 枠 線 の 表示 形式 table 要素 collapse O_275 
bordercolor 枠 線 の 色 の 一 括 指定 すべ て の 要素 個別 に 参照 X ら 43 
border-spacing セル と セル の 間隔 table 要素 0 (人 者 = ダ 4 
border-style 枠 線 の 形式 の 一 括 指定 すべ て の 要素 個別 に 参照 x ら 45 
border-top 上 の 枠 線 の 色 ・ 形 式 ・ 太 さ すべ て の 要素 個別 に 参照 x 。 ら 47 
borderbottom 下 の 枠 線 の 色 ・ 形 式 ・ 太 さ すべ て の 要素 個別 に 参照 X 。 ら 47 
borderleft 左 の 枠 線 の 色 ・ 形 式 ・ 太 さ すべ て の 要素 個別 に 参照 X ら 47 
borderright 右 の 枠 線 の 色 ・ 形 式 ・ 太 さ すべ て の 要素 個別 に 参照 X ら 47 
border-top-color 上 の 枠 線 の 色 すべ て の 要素 color の 値 x ら 43 
border-bottom-color 下 の 枠 線 の 色 すべ て の 要素 color の 値 x ら 43 
borderrleft-color 左 の 枠 線 の 色 すべ て の 要素 color の 値 x ら 43 
borderright-color 右 の 枠 線 の 色 すべ て の 要素 color の 値 メ ら 43 
bordertop-style 上 の 枠 線 の 形式 すべ て の 要素 none x ら 45 
borderrbottom-style 下 の 枠 線 の 形式 すべ て の 要素 none x ら 45 
borderrleft-style 左 の 枠 線 の 形式 すべ て の 要素 none x ら 245 
borderright-style 右 の 枠 線 の 形式 すべ て の 要素 none X ら 45 
bordertop-width 上 の 枠 線 の 太 さ すべ て の 要素 medium x 。 ら 41 
border-bottom-width 下 の 要 線 の 太 さ すべ て の 要素 medium X ら 41 
borderlefttwidth 左 の 枠 線 の 太 さ すべ て の 要素 medium x 。 ら 41 
borderright-width 右 の 枠 線 の 太 さ すべ て の 要素 medium X ら 41 
borderwidth 枠 線 の 太 さ の 一 丘 指定 すべ て の 要素 個別 に 参照 X 。 ら 41 
DB 下 か ら の 位置 「position: static」 以 外 IfD X 陸 
の 要素 

ら 6 ら 
caption-side 表 タ イト ル の 表示 位置 caption 要素 top O 878 
clear 回 り 込 み の 解除 ブロ ッ ク レ ベル 要素 none x ら 54 
clp 見 える 電 較 MY auto x 
color 文字 色 すべ て の 要素 ブラ ウザ に 依存 〇 201 
mw eoan oe 



































































































































素 と table 関連 要素 以外 「「「 


counter-inorement 連 番 の 値 を 進め る すべ て の 要素 none XX 
counter-reset 連 番 の リセ ッ ト すべ て の 要素 none メ 
cue 要素 識別 音 の 一 括 指定 すべ て の 要素 未定 義 X 
cue-fter 要素 の 直後 に 識別 音 を 鳴ら す すべ て の 要素 none ※ 
cue-before 要素 の 直前 に 識別 音 を 鳴ら す すべ て の 要素 none X 
CUrSOr カー ソル の 形状 すべ て の 要素 auto 〇 8 ら 80 
direction 文字 表記 の 方 向 すべ て の 要素 Itr O 
display 表示 形式 すべ て の 要素 inline x 6 ら 266 
elevation 音 の 聞こ える 縦 方 向 の 位置 すべ て の 要素 level O 
empty-cells 空 セル の 枠 の 表示 ・ 非 表示 th・td 要 素 show 〇 O ら 279 
も すべ て の 要素 
float 左右 へ の 配置 と 回 り 込 み (例外 あり ) none X ら 65 ら 
font フォ ント の 一括 指定 すべ て の 要素 個別 に 参照 O 810 
font-family フォ ント の 種類 すべ て の 要素 ブラ ウザ に 依存 〇 208 
font-size フォ ント サイ ズ すべ て の 要素 medium 〇 204 
font-size-adjust フォ ント サイ ズ の 調整 すべ て の 要素 none O 
font-stretoh 長 体 ・ 平 体 すべ て の 要素 normal O 
font-style イタ リッ ク すべ て の 要素 normal 〇 208 
font-variant スモ ー ル キャ ッ プ すべ て の 要素 normal O 
font-weight フォ ント の 太 さ すべ て の 要素 normal 〇 806 
時 テキ スト の イン ライ ン 要 系 
09ei ポッ クス の 内 容 領域 の 高 さ と col・colgroup 要素 以外 00 0 9 
た 258. 
lef 左 か ら の 位置 ( 旨 二 0 ro x 860, 
の 要素 
2668 
letter-spacing 文字 間隔 すべ て の 要素 normal O 817 
line-height 行間 すべ て の 要素 normal O 818 
list-style リス ト の マー ク の 一 括 指定 Ii 要素 未定 義 〇 274 
list-style-image リス ト の マー ク の 画像 要素 none CBZ ら 
liststyle-position リス ト の マー ク の 表示 位置 |i 要 素 outside O 873 
list-style-type リス ト の マー ク の 形式 li 要素 disc O 2 ら 70 
margin マー ジン の 一 括 指定 すべ て の 要素 未定 義 メ 2 
margin-top IE マ コジ ん すべ て の 要素 0 X ら 37 
margin-bottom EK マージ すべ て の 要素 0 X ら 87 
margin-left 左 マ ー ジ シ すべ て の 要素 0 し 3 の 2 
ら 656 
5 有 237. 
margin-right 右 マ ー ジ ン すべ て の 要素 0 X っ ge 
markeroffset リス ト の マー ク と 内 容 の 間隔 Ca rake の 。 no x 
marks トン ボ の 指定 @page の 宣言 内 の み none - 
maxheight 最大 の 高 さ AO イッ ラス スッ 舞 に x 











中 テキ スト の イン ライ ン 要 
max-width 最大 の 幅 素 と able 関連 要 素 以 PT メ 
1 可 テキ スト の イン ライ ン 要 
CURE 電電 素 と able 関連 要素 以外 5 
還 テキ スト の イン ライ ン 要 _」_ に 
min-width 最小 の 幅 素 と table 関連 要素 以外 ブラ ウザ に 依存 メ 
orphans ペー ジ 最 後 の 段 落 の 必要 行 数 ブロ ッ ク レ ベル 要素 ら O 
outline アウ トラ イン の 一 括 指定 すべ て の 要素 個別 に 参照 メ 
outline-color アウ トラ イン の 色 すべ て の 要素 invert ※ 
outline-style アウ トラ イン の 形式 すべ て の 要素 none ※ 
outline-width アウ トラ イン の 太 さ すべ て の 要素 medium ※ 
ー 。、 。 ブ ロッ クレ ベル ・ 9 
overflow は み 出 る 部 分 の 表示 方 法 置換 要素 visible x 6 ら 68 
padding パ デ ィ ン グ の 一 括 指定 すべ て の 要素 ※ 未定 義 x 6 ら 39 
padding-top 上 パ デ ィ ン グ すべ て の 要素 ※ 0 x ら 38 
padding-bottom 下 パ ディ ング すべ て の 要素 ※ 0 X ら 938 
padding-left 左 パ ディ ング すべ て の 要素 ※ 0 X 638 
paddingright 右 バ ディ ング すべ て の 要素 ※ 0 x ら 38 
Dage 用 紙 設定 の 適用 ブロ ッ ク レ ベル 要素 auto O 
page-break-after 要素 の 直後 で 改 ペ ー ジ ブロ ッ ク レ ベル 要素 auto メ ら 81 
page-break-before 要素 の 直前 で 改 ペ ー ジ ブロ ッ ク レ ベル 要素 auto X ら 81 
page-break-inside 要素 内 で の 改 ペ ー ジ の 禁止 ブロ ッ ク レ ベル 要素 auto (@) 
pause 読み 上 げ 休 止 時 間 の 一 括 指定 すべ て の 要素 ブラ ウザ に 依存 x 
pause-after ン wi すべ て の 要素 ブラ ウザ に 依存 メ 
pause-before ea すべ て の 要素 ブラ ウザ に 依存 メ 
pitch 読み 上 げ 時 の 声 の 高 さ すべ て の 要素 medium O 
pitchrange ンド すべ て の 要素 50 O 
play-during 病 の 4 N グ 2 ラン すべ て の 要素 auto メ 
ンド 音 
相対 配置 ・ 絶 対 配 置 ・ 固 定 CSS で 追加 され る 内 容 8 
position static x ら 60. 
配置 以外 
26 ら 
quotes 引用 符 の 設定 すべ て の 要素 ブラ ウザ に 依存 〇 
richness 読み 上 げ 時 の 声 の 明 賑 度 すべ て の 要素 50 O 
558 
攻 「position: static」 
right 右 か ら の 位置 以外 の 要素 guto X ら 60. 
ら 6 ら 
size 用 紙 サ イズ と 方 向 @page の 宣言 内 の み auto - 
Spe8k 音声 読み 上 げ 時 の 読み 方 すべ て の 要素 normal O 
speak-header 表 の 見 出し の 読み 上 げ 方 人 要素 ・td 要 素 Once O 



































※ た だ し 、table 関連 要素 で 例外 あり 


































































































要素 


speak-numeral 数 字 の 読み 上 げ 方 すべ て の 要素 continuous 。 〇 
speak-punctuation 句読点 や 記号 の 読み 上 げ 方 すべ て の 要素 none O 
speech-rate 読み 上 げ る 速度 すべ て の 要素 medium O 
時 8 な 読み 上 げ 時 の アク セン ト の すべ て の 要素 50 O 
強 さ 
table-layout テー ブル の 表示 方 法 table 要素 auto メ 
me V ブラ ウザ と 文字 表 
text-align 行 揃え ブロ ッ ク レ ベル 要素 記 の 方 向 に 依存 O 814 
text-decoration 下線 ・ 上 線 ・ 取 消 線 ・ 点 減 すべ て の 要素 none x ら 08 
text-indent ] 行 目 の イ ン デ ント ブロ ッ ク レ ベル 要素 0 〇 O 218 
text-shadow 影 文 字 すべ て の 要素 none メ 
text-transform 大 文字 ・ 小文字 すべ て の 要素 none 〇 682 ら 2 
の 258. 
5 上 か ら の 位置 「position: static」 以 外 BtD x ae0. 
の 要素 
2668 
unicode-bidi 文字 方 向 の 上 書き と 組み 込み すべ て の 要素 normal X 
イン ライ ン 要 素 ・th 要 有 
Vertica[align 縦 方 向 の 位置 素 ・td 要 素 baseline x 215 
Visibility 表示 ・ 非 表示 すべ て の 要素 Visible 〇 2866 
Voice-family 音声 読み 上 げ 時 の 声 の 種類 すべ て の 要素 ブラ ウザ に 依存 〇 
volume 音声 読み 上 げ 時 の 音量 すべ て の 要素 medium O 
white-space 空白 改行 ・ タ ブ の 処理 すべ て の 要素 normal O oy 
widows ペー ジ 最 初 の 段落 の 必要 行 数 ブロ ッ ク レ ベル 要素 ら O 
y 8 テキ スト の イン ライ ン 要 素 
width ボッ クス の 内 容 領域 の 幅 と col・colgroup 要素 以外 auto x ら 49 
Word-spacing 単語 間隔 すべ て の 要素 normal (CZ 
重なる 順序 「position: static」 以 外 の af ろ B オ 








8 CSS2 対 応 状況 一 臣 






















































































background OU OS OO OO 603A DO G ⑩ 、⑳' @ 
backgroundiattaehmmet 〇 O O O OO OO x Oo oo o 
background-color @6 6 @6 @  ⑮ 5 も さき  Q  ⑳ @ 
backgroundmage IO の OO Si6 9 の で 9 9 交 人 パ 
background-position O 6 9  @ ⑯ ぬ Oo_ Ke 人 疫 人 @ ⑯ 人 
backgroundepeat OB GO OO @ @⑥ 0 O @⑩ 6 @ @⑥ る S 
border OFG 5 GO G G ⑥ る G @ 6 @ 6 
border-collapse Oo (0)。⑨ る の 9 9 旭 、2 交 
bordercolor o o o o o o o ^ o o o o o 
border-spacing 2 2 VS 次 Oo O 、@ 0 G79 「 記 5 メ 
borderstyle の 9 〇 ② 2 ⑨9 9 @6 2 O 9 @⑩ ⑤ る 
bordertop の 6 9O @⑥ ⑨ ⑥ @⑥、@⑥ ※ @ @ @ ⑨ @ 
borderbottom @ GO O 6 @⑧ ⑥ @⑥ % 6 ⑨9 .@ 1@ ら @ 
borderleft の OO OO の 0 BOO の OO 
borderright GOPOaO GO G 9 KYO OO @ 6 
border-top-color O O O GO: ご 0 6n 次 らら 作 Oo_ o 
border.bottomrcolor OO OOG の の nom% OO 9 OO の 
borderleftcolor 6 OO9 QG S oO 色 6 QO の 9 @ @ 
border-right-color O 5 Oo O O 5 O O 5 x 19 o (9 
border-top-style (の 旨 蔽 いら) A ム ム O O "で x OO ⑤ ⑤ で 人 ぞ 
border-bottom-style (oy ) 雪 @) A ム o O 《『 2  ⑥ oO Oo O 人 ム 
borderleft-style OO ④ A @ @ @⑥ % 9 G @ @ る 
borderright-style Os の O の 2 ⑩ @ 9 XX @⑥ 9 @⑥ ⑳⑯ る 
border-top-width ⑳ 人 ウ Q、@ Oo o ^ ム o O O o 9 Oo 
borderbottomrwidth OO 9 OO GOm9- SG OO 9 9 36 
borderleftwidth が OO OO GO の こさ 2 639 08 7@ 
borderright-width の OO 0 9 .O も ぷ や 、9 G Q.⑩ 〇 
borderwidth OSG 9.9 @⑥ OO へ Q OO Q 
bottom QG @ Q メ @⑥ O O % 9 QG @ @ ※ 
Caption-Side x 人 R し 2 x O_ O 人 べ 。 区 人 交 ※ 
clear GO QO ③G ⑨6 ⑨ ⑨ の O 〇 ⑨9 ② ⑨ ⑤ @ 
Clip x ル .3 3 X ル .4 X X X X し 3 X X X 





| 
| 
| 
| 
| 
| 


| 

| 

| | 
) 
に <) 
に -】 


wV で さ N こ 給 























































































































elxlxlxlslxlxlxlslolols|k lolslolslels sk selok kk|> 
olx|*|*lolz slelelelelxleleleleleklols slelslelelelslslx|kk|: 
ollxlxlolxlololololslolxlxlololelololelololelsl。lololololelx xx |o 
olslololxlxlololololols|xl*lololololololols lolo|s|ololololo|* |*lolo 
Mololololololololololololxlxlololololololololololslolololololx |x lolo 
klilkliksE hs ドド ドド ドド ドド ド le ドド ドド ドド ドド ドド ドド トド ドド | 
olxlxlololololololslslx|xlslsjslslsjslslslslslslololelolo| olo 
olslxlxlolololololololololxlololololololololelelelolololololx| xls ls 
olslxlxlolololololololololxlololololololololololololololololx|x|olo 
MMEMMMMMBEEMMMEMEEEEBEEHEEEEEEEMEE 
olxlxlxlqlolqlxlolololqlxlxlolqlolqlolololelololqlqlololslqlxlxlxlx 
olxlxlxlslolslxlololols|*|*lolslols lololols lolols|s lolols|s|xlx|x|* 
olxlxlxlololqlxlololololxlxlolololololololslololslolololololx|x|x|x 

W 6 sl 

5 の っ き |g 司 | だ き 8lgl き | を | 8 ち 

生計 半月 回目 国 還 月間 有明 旧 月 目 目 半 還 日 門 剛昌 由 軸 日 自 還 昌 上 
きき 引 引 89181818| 585| | 引 引 8 紳 劉 争 紳 証 8lSls|5 
8181818|18| き | き |5|8|8IEIB|8I818I5|8|e| き | 件 生 きき | 介 |E|E|EIEIEIEIE|E|E 

ささ h ト さ へ に 




















































































































] | 
XXIXI1XIXRIXLIGIOIOGIOTIOIXIST ISIISIKIRI1R131 る IOLXIOIGI 災 3 13 TX 1 
X1OIGIGIGISIOIOIOIOGIGIK IS3UIGISISIXIOIXIXKIOIOIOIXIS1S1SIS ISIG IK 
%X|13 く 1313I3IOIOIOIO O1O|% ololxlolxlolxlolololo OIOIOIxXIOI3IOI 
xlxlxlxlxlq|IOIOIOIOlIolxlolololololololololololxlololxlolqlolx 
olololololololololololxlolololololololololololxlolololols lolo 
% 中 上 XI JoeR IOTGTGIGMIGUIKNelXIXISWI ISIX タ 3 IS MI SISIS ドド 
xlxlxlxlx]OIOIOIOIOIOlxlxlxlxlIOolqIolx|IOolIolIOololx|ololololololx 
] | | 

xlxlxlxlxIOIOIOlIolololxlololxlolqlolxlololololxlololololololx 
xlxlxlxlxIOIOIOIOIOIOlxIOIOlxIOlqIOlxIOolIOolIOolIOolx lololololololx 
X|X]X|X|X|X|O 〇 IOIOIOIOlIzX|I3 く IIXI く IXIXIXIXIOIOIOIXIOIOIXI1313 く IXlx 

| ] ] 
IX]IXIXIXIX|I3 く IOIO|IOIOIOlxIOIOlxI3IxIOlxIOIOIOIOlxIOIOIOI3I4|xlx 

| | | 
xlXIxXIXIxlI く IOIOIOIOIOlxIOIOlx| く lxIOlxIOIOIOIOlx|IOIOIOIOI414|x 

| 
%XIXIXIXIXI3IOIOIOIOIOIXIOIOIXI3IXIOIXIOIOIOIOIXIOIOIOIOI31OIX 
の 
ヨ gl5 | 「 
選 セ 窒 | 8| 呈 品 E 

5 gl 吾 ゼ 『= 0 村 諾 2 | ミ っ 語 @ 

| = き | き | 818| る | きき | | きき まま に 8 E 論 直上 | 1 きき | 18 

8 も |@ りら | の | を そ | =| ml| 量 | 下 | 量 |W に 軒 - 提 上 - 汗 間 コ 如 |6| 刀 | g 5 
回 |e|l ゅ ぉ || ぉ | る 8| 己 | 如 | 召 由 呈 | 呈 |6|@w 豆 | 三 |@| ど gg で | 有三 | の 1@ 
記 ま 1QT だ 直 | 手中 1 言 内 千 ゅ ||@ る |9| や | 計 |5|5 819 告 |]$ | き 
で | と | 語 | 言 | 結 | 告 | 告 |5|8 88 | 唱 多 | 品 |8| 語 || 吾 | | | 史 ||al8||| モ | 
E|IEl5|8l18a18a181818I8I8S|8IBISI8SIS| き | ざき |@|B1S1S1SIB1SIB|5| ま | まま | ミ 











width 0 人 人 人 公 @ 〇 人 @ くべ @O の 〇 ぐら S@ 
WOrd-SDaCing ⑨⑲ 炎 3 co CN は WE Fc 6 6 の 
ヶ index GO GO 9 し の 人 人 0 、 人 び ざ は 人 、 人 各 、 信 


※ 各 プロ パテ ィ の 対応 状況 と た 、 〇 へ x の 3 段階 ご お お ま か に 示し まし た 。 
環境 や 細か い バ ー ジ ョ ン の 違い な ど に よっ て は 、 結 果 が 異な る 場合 も わり ます の で 、 注 意 し て くだ さい 。 
標準 仕様 と は 異な る 指定 方 法 が 必要 な も の に つい て は 、 未 対応 と し て いま す 。 

※ 音 声 ブ ラウ ザ 用 な どの 一 部 の プロ パテ ィ は 、 省 略し て いま す 。 


ソー ス を コピ ー す る 時 の 注意 

JavaScript は 、 ソ ー ス コー ド を 直接 HTML ファ イル に 書き 込む た め 、 比 較 的 簡 
単に ソー スコ ー ド を 見 る こと が で きま す 。 こ れ は 、 イ ンタ ーネット 上 に 数 多く 公開 
され て いる コピ ー フ リー の JavaScript の ソー ス を 簡単 に 見 る こと が で きる と いう 
こと な の で 、JavaScript を 勉強 する 上 で 非常 に 有意 義 な こと で あり 、 そ し て これ 
は JavaScript の 大 き な 魅 力 の ひと つ で も あり ます 。 

し か し 、Netscape Navigator 3.0 以 上 の バー ジョ ン の ブラ ウザ で 、[ 表 示 ] メ 
ニュ ー の [ペー ジ の ソー ス ] を 使っ て ソー スコ ー ド を 見 よう と し た 場合 、 そ こ に 表示 
され る ソー スコ ー ド は 、 正 確 で は な い 場 合 が あり ます 。 

た と えば 、 次 の スク リプ ト を 実行 し た 時 、 


<SCript 1]anguage="JavaSor1p 上 "> 
document .write( "今日 は !!") 
</ Script> 


[ペー ジ の ソー ス ] で 表示 され る ソー ス は 、JavaScript の コー ド 部 分 が な く な り 、 次 
の よう に な る 場合 が あり ます 。 


今日 は !! 


また 、 こ れ と 同じ よう な 例 で 、 特 殊 フォ ント の 「&It:」 や 「Slg:」 も 「<」 や 「>」 と な 
り ま す 。 

この よう に 、[ ペ ー ジ の ソー ス ] で 表示 され る ソー ス は 、HTML ファ イル の 内 容 そ 
の まま で は な く 、 一 旦 ブラ ウザ に 読み 込ま れ て 評価 され た 結果 の HTML に な る こと 
が ある の で す 。 

この 問題 を 回 避 し て JavaScript の ソー ス を 正確 に 見 る に は 、 ブ ラウ ザ の 設定 で 
JavaScript の 実行 を 一 旦 中 止 し て か ら ペ ー ジ を 読み 込み 、 ペ ー ジ の ソー ス を 表示 
する よう に すれ ば 大 丈夫 で す 。 
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JavaScript と は 


JavaScript と は 、Netscape 社 が Web ペー ジ の 処理 能力 を 高め る た め に 開発 し た 
LiveScript を 元 に 、Netscape 社 と Sun 社 が 共同 で 開発 し た スク リプ ト 言 語 で 、Netscapc 
Navigator2.0 以降 の プラ ウザ と mtemetExplorer 3.0 以降 の プラ ウザ で 対応 きれ て いま す 。 

JavaScript を 使う こと に より 、Web ペー ジ を 動 的 に 変化 きせ た り 、 今 まで CGI な ど で 
行う 必要 が あっ た 処理 の 一 部 を 、Web ペー ジ 上 で 行う こと が 可能 に な り ま す 。 





仕様 に Java と 似 た 部 分 が あり 、JavaScript が 実行 で きる 環境 (プラ ウザ ) さえ あれ ば 
OS が 違っ て いて も 同じ よう に 動く (こと を 期待 で きる ) プ ログ ラム を 書く こと が で きる 、 
な どの 点 が Java と 似 て いる と いえ ます 。 け れ ど も 、 基 本 的 に Java と は 別物 と 考え を た ほ 
9 で しよう っ 

Java と の 最大 の 違い は 、 コ ン パ イル を する 必要 が な く 、HTML 文章 内 に 直接 JavaScript 
を 記述 し 、 そ の ファ イル を プラ ウザ で 読み 込む こと に よっ て 、 手軽 に スク リプ ト を 実 
行 で きる 点 が 挙げ られ ます 。 


JavaScript の 種類 

JavaScript は 、 現 在 JavaScript1.3 まで の パー ジョ ン が 公開 され て いま す 。 JavaScript 
の より 新しい バー ジョ ン は 、 一 部 の 変更 点 を 除い て 、 古 い バ ー ジ ョ ン の JavaScript の す 
べ て に 対応 し て いま す 。 

それ ぞ れ の バー ジョ ン の 特徴 と 対応 プア ラテ ウザ は 、 次 の 通り で す 。 


圏 JavaScript1.0 

プラ ウザ の ウィ ンド ウ を 操作 する window オプ ジェ クト や 、 日 付 を 取り 扱う Date オプ 
ジェ クト な どの 基本 的 な オプ ジェ クト が 追加 され まし た 。 

Intemet Explorer 3.0、Netscape Navigator2.0 以降 の プラ ウザ で サポ ー ト され て いま す 。 


圏 JavaScript1.1 

画像 を 取り 扱う Image オプ ジェ クト が サポ ー ト され まし た 。 こ れ に より ペー ジ 表 示 後 
に 画像 が 置き 換え られ る よう に な り 、 マ ウス ポイ ンタ の 動作 に よっ て 画像 を 差し 換え 
た り 、 定 期 的 に 画像 を 差し 換え る こと に よっ て アニ メー ショ ン の 効果 を 出し た り で き 
る よう に な り ま し た 。 

Intemet Explorer 4.0、Netscape Navigator 3.0 以降 の プラ ウザ で サポ ー ト され て いま す 。 


田 JavaScript1.2 

ディ スプ レイ サイ ズ な どの ディ スプ レイ の 情報 を 取得 する screem オブ ジェ クト や 、 
ウィ ンド ウ 上 に 絶対 座標 で ユン テン ツ の 位置 を 設定 し た り 、 重 な り を 指定 する こと が 
で きる Layer オプ ジ ェクト な ど が 追加 され まし た 。 こ れ に より 、 デ ィ ス プレ イ 上 の ウィ 
ンド ウ の 位置 や 、 ウ ィ ン ド ウ 内 に 表示 する コン テン ツ の 位置 や 重なり を 細か く 設 定 す 


る こと が で きる よう に な り 、 さ ら に それ ら る を 動 的 に 変化 さき せる こと が で きる よう に な 
り ま し た 。 
Internet Explorer 4.0、Netscape Navigator4.0 以降 の プラ ウザ で サポ ー ト され て いま す 。 


圏 JavaScript1.3 

文字 コー ド が の 扱い が Unicode に な っ た ほか 、 日 付 を 取り 扱う Date オプ ジ ェクト で 
年 号 が 4 桁 で 表せ る よう に な っ た り 、 ミ リセ コン ド 上 単位 の 時 間 を 扱え る よう に な っ た 
り 、 と いっ た 細か な 部 分 で 追加 ・ 変 更 が 行わ れ て いま す 。 こ れ ら の 処置 は 、ECMAScript 
(ECMA-262) の 1 版 と 互換 を と る た め の も の で す 。 

Intemet Explorer 5.0、Netscape Navigator4.06 以降 の ブラ ウザ で サポ ー ト され て いま す 。 


田 JavaScript1.4 
ECMAScript の 1 版 と 完全 互換 し た スク リプ ト で す 。 
JavaScript1.4 を 搭載 し た ブラ ウザ は 、 結 局 は 発表 され ませ ん で し た 。 


圏 JavaScript1.5 

ECMAScript の 第 3 版 と 完全 互換 を 持っ た スク リプ ト で す 。 

標準 規格 に 完全 に 準拠 する 姿勢 に 合わ せ て JavaScript1.5 と し て 規格 化 き れ て いる の 
は 、ECMAScript と 同様 に ビル トイ ン オ プ ジ ェ クト の 部 分 の み で す 。 し か し 、DOM 
(Document Object Model) の コン トロ ー ル を 行う 方 法 は 規定 され て いる の で 、DOM で 
サポ ー ト され て いる 、 プ ラウ ザ や HTML、 ス タイ ル シ ー ト な どの あら ゆる 要素 を 、 
JavaScript を 使っ て 操作 する こと が で きま す 。 

Mozilla や Netscape 6.0 以降 の プラ ウザ で サポ ー ト され て いま す 。 ま た 、TInternet 
Explorer は 、 バ ー ジ ョ ン 3.0 以 降 で あれ ば 、 JavaScript1.5 レベ ル の スク リプ ト を サポ ー 
ト し て いま す 。 


この 他 の JavaScript と 共に 覚え て お きた い ス クリ プ ト 言 語 に 、ECMAScript と JScript 
が あり ます 。 こ れ ら は JavaScript を ベー ス に し て 作ら れ た 言語 で 、JavaScript と 互換 を 
と る よう に 配慮 きれ て いま す が 、 そ の 使用 や 実装 に は 微妙 な 違い が あり 、 残 念 な が ら 
現状 で は 100% 互 換 と は 言い 切れ ませ ん 。 

それ ぞ れ の 言語 の 特徴 は 、 次 の 通り で す 。 


圏 ECMAScript 

ヨー ロッ パ の 標準 化 機関 で ある ECMA(European Computer Manufacturers Association) 
が 、JavaScriptl.1 を ベー ス に 規定 し た イン ター ネッ ト で 使用 する スク リプ ト 言 語 の 仕 
様 で す 。ECMA-262 と し て 仕様 が 公開 され て いま す 。 

ECMAScript で は 、JavaScript の ビル トイ ン オ プ ジ ェ クト の 部 分 は 規格 化 さ れ て いま 
す が 、 ナ ビ ゲ ー タ オプ ジェ クト の 部 分 で JavaScript の よう に 細か く オ ブ ジ ェクト を 規格 
化す る よう な こと は 行わ れ て いま せん 。 し か し 、 オ プ ジ ェ クト の 取り 扱い 方 は 規定 さ 
れ て いる の で 、 こ れ を 利用 し て DOM を コン トロ ー ル する こと が 可能 で す 。 

ECMAScript は あく まで も 言語 仕様 を 規定 し た も の で あり 、 そ の 仕様 に 合わ せ て どの 











よう に 実装 きれ る か は 、 そ の 言語 に よっ て 変わ っ て きま す 。 現在 、JavaScript1.3 以降 
と Microsoft 社 の JScript3.1 以降 が 、ECMAScript と 互換 が と られ て いる こと に な っ て い 
ます が 、 ふ た つの スク リプ ト 言 語 に は か な り 培 う 部 分 が あり ます 。 ま た 、Safari と Opera 
は 、 正 確 に は この ECMAScript を サポ ー ト し た プラ ウザ と な り ま す 。 こ の た め 、 両 ブ 
ラウ ザ は 、JavaScript1.5 レベ ル の JavaScript を 、 ほ ぼ サ ポー ト し て いま す 。 

ECMA-262 は 、 現 在 3 版 ま で 公開 され て いま す 。 JavaScript と ECMA-262 の 各 版 と の 
関連 は 、 次 の 通り で す 。 





JavaScript1.1 これ を 元 に ECMA-26 ら の 1 版 が 作成 され た 





JavaSoript 1 . ら ECMA-262 で は 、Unicode の 採用 に よる 国際 化 が 行なわ れ て い 
る ほか 、JavaScript に お ける Date オブ ジェ クト の toGMTString 
メソ ッ ド の よう に 、 実行 結果 が マシ ン 環 境 に 左右 され る こと の な い 
よう な 規格 が 作ら れ て いる 。 ま た 、JavaScript 1.2 で は 、ECMA- 
ら 6 ら の 1 版 で は 考慮 され て いな か っ た 独自 の 仕様 が 追加 され て いる 

_ た め 、 完 全 な 互換 性 は 持っ て いな い 

JavaScript1.3 ECMA-26 ら の 1 版 と 完全 互換 を 持つ よう に 変更 が 行わ れ た 

JavaScript1.4 ECMA-262 ら の 1 版 と 完全 互換 を 持つ (JavaScript 1 .4 を 採用 し た 
ブラ ウザ は 存在 し な い ) 

JavaSoript1.5 ECMA-26 ら の d 版 と 完全 互換 を 持つ 











な お 2 版 は 、1 版 の 細か い 部 分 の 変更 や バグ フィ ックス か ら な り ま す 。 ECMA-262 の 
4 版 は 、 現 在 ECMA の TC39 ワ ー キ ング グル ー プ で 話し 合わ れ て いま す 。 こ れ は 、 将 来 
JavaScript2.0 に な る 予定 で す 。 


圏 JScript 

Microsoft 社 が 独自 に 開発 し た JavaScript 互換 の スク リプ ト 言 語 で す 。IntermetExplorer 
に 搭載 され て いる の は 、 正 確 に いう と JavaScript で は な く 、 こ の JScript と いう こと に 
な り ま す 。 

Internet Explorer 3.0(Mac 版 は Imternet Explorer 3.1) か ら 実装 され て お り 、Internet 
Explorer 3.X に は JavaScript1.0 レベ ル の スク リプ ト が 実行 で きる JScript が 、Internet 
Explorer 4.X で は JavaScript1.1 レベ ル の スク リプ ト と JavaScript1.2 の 一 部 が 実行 で きる 
レベ ル の JScript が 実装 る され て いま す 。 

現在 仕様 が 公開 され て いる JScript は JScript5.0 で 、 こ れ は JavaScript 互換 と いう より 
も ECMAScript 互換 スク リプ ト と いっ た 方 が よく 、ECMAScript に 準拠 し な が ら Intemet 
Explorer 独 自 の 拡張 が 施さ き ミ れ て いて 、Imternet Explorer 5.X 以降 で 採用 され て いま す 。 


ブラ ウザ か ら 見 た JavaScript の 対応 状況 
Internet Explorer と Netscape Navigator 両 プ ブラ ウザ の 各 バ パ バー ジョン で 対応 し て いる 
JavaScript と 、JavaScript を 使う 上 で の 注意 点 は 、 次 の 通り で す 。 


圏 Internet Explorer 3.X 

JavaScript1.0 レベ ル の スク リプ ト に 対応 し て いま す 。 

Internet Explorer 3.X は 、 た と え 同 じ バ ー ジ ョ ン 番 号 の も の で あっ て も 細か い 改 良 が 
加え られ て お り 、 実 行 で きる JavaScript も 増え て き て いま す 。 そ の 結果 、 同 じ バ ー ジ ョ 
ン の IntemetExplorer で 同じ スク リプ ト を 実行 し た と し て も 、 一 方 の ブラ ウザ は 正常 に 
実行 で き 、 一 方 の プラ ウザ は エラ ー に な る 、 と いう 現象 が 発生 し ます 。 

Internet Explorer 3.X は 、JavaScript 以外 で も 、HTML の 表示 や セキ ュ リ ティ の 問題 な 
ど 多く の 部 分 が 改良 され て いる の で 、 な る べく 最新 の も の を 使用 する こと を お 勧め し 
ます 。 





圏 Internet Explorer 4.X 

JavaScript1.1 レベ ル の スク リプ ト に 対応 し て いま す 。 

JavaScript1.2 レベ ル の スク リプ ト も 、 レ イヤ ー な どの Netscape Navigator 独自 の 部 分 を 
除い て 、 ほ ば 対応 し て いま す 。ECMAScript(ECMA-262) の 仕様 に 準拠 し て いる の で 、 
正式 に は JavaScript1.3 に は 対応 し て いま せん が 、 JavaScript1.3 の 多く の スク リプ ト が 実 
行 可 能 で す 。 

また 、DOM も この バー ジョ ン か ら サ ポー ト さ れ て お り 、 ス タイ ル シ ー ト 関連 の 要素 
を 始め 、Internet Explorer で サポ ー ト サ れ て いる ほとん どの 要素 を 、 オ プ ジ ェ クト と し て 
取り 扱う こと が 可能 で す 。 し か し 、 そ の 実装 は 、DOM の 規格 が 確定 する 前 だ っ た こと 
も あり 、 今 と な っ て は Intemet Explorer の 独自 色 が 強い も の と な っ て いま す 。 





圏 Internet Explorer 5.X/6.0 

JavaScript の サポ ー ト に 関し て は 、Intemet Explorer4.X と ほぼ 同等 で す 。 JavaScriptl.3 
に も 対応 し て いま す 。 

DOM の 扱い も 、 規 格 に 合わ せ た 実 装 が 目指 され て いる た め 、 多 く の 場 合 、Netscape 
Navigator 6.X や Mozilla と 同じ 用 法 で 使用 する こと が で きま す 。 


圏 Netscape Navigator 2.X 

JavaScriptl.0 に 対応 し て いま す 。 

JavaScript に 始め て 対応 し た プラ ウザ で す 。Macintosh 版 で は 、 新 し い ウ ィ ン ド ウ を 
開い た 時 に 表示 する ペー ジ の URL が 取得 で きず に ペー ジ が 表示 で き な い 、 ル ー プ し て 
JavaScript を 実行 する と メモ リー エラ ー が 発生 する 、 な どの 問題 が あり まし た 。 


圏 Netscape Navigator 3.X 
JavaScriptl.1 に 対応 し て いま す 。 
Netscape Navigator 2.X の Macintosh 版 に あっ た 問題 点 が 解消 され て いま す 。 
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圏 Netscape Navigator 4.X 

JavaScript1.2 に 対応 し て いま す 。 

レイ ヤー な ど 、Netscape Navigator 独自 仕様 の も の も JavaScript で 制御 で きる よう に 
な り ま し た が 、 そ の 結果 、 ス クリ プ ト の 独自 色 が 強まっ て し まい まし た 。 

また 、W3C に よる 標準 仕様 が 存在 する スタ イル シー ト も レイ ヤー と 同じ よう に 
JavaScript で 制御 で きま す が 、Netscape Navigator 自身 の スタ イル シー ト の 実装 に は 、 不 
完全 な 部 分 が あり ます 。 


田 Netscape Navigator 4.06 以降 
JavaScript1.3 に 対応 し て いま す 。 
文字 が Unicode で 扱わ れる よう に な っ た た め 、 ペ ー ジ 上 や フォ ー ム 、 ス テー 
な ど に JavaScript を 使用 し て 文 池 を 書き 出す 場合 に 、 表 示さ れる 文字 が 文字 化け を 起 
6 性 が あり ます (この 問題 は Netscape Navigator 4.5 日 本 語 版 で は 解消 され て 0 
> また 、Unicode で は 文字 が 2 バイト 文字 な の で 、 文 字数 を 数 えて いる よう な スク 
AO 今 ま で と は 違う 結果 に な る 場合 が あり ます 


田 Netscape 6.X / 7.X / Mozilla / Firefox 

JavaScriptl.5 に 対応 し て いま す 。 

標準 規格 で ある ECMAScript と 完全 互換 を 持つ ほか 、DOM の サポ ー ト に より 、 今 ま 
で 以上 に 細か い 部 分 まで プラ ウザ を 制御 する こと が 可能 に な り ま し た 。 


Netscape Navigator と Internet Explorer と 
ECMAScript の 関係 
Netscape Navigator で の ECMAScript の サポ ー ト は JavaScript 1 .3 か ら 、 
つま り Netscape Navigator 4.06 か ら で す 。 そ れ に 対し て Internet Explorer 
は 、Internet Explorer 4.X か ら ECMAScript を サポ ー ト し て いま す 。 ま た 、 
Netscape Navigator 4.06 以 前 の Netscape Navigator 4.X の ブラ ウザ で も 、 
一 部 ECMAScript を サポ ー ト し て いま す 。 


つま り 、Internet Explorer 4.X や Netscape Navigator 4.06 以 前 の Netscape 
Navigator 4.X は 、<script> 内 の 「language」 属性 の 設定 で 、「<script 
language='JavaScript1.3">」 と 設定 され た スク リプ ト は 実行 で きま せん が 、 
「getFullYear0] メ ソ ッ ド な どの JavaScript 1 .3 に 含ま れる 多く の ECMAScript 
を 実行 する こと が で きま す 。 


人 に で 

JavaScript は 、HTML ファ イル 内 に HTML タグ を 使っ て JavaScript で ある こと を 指定 
し 、 そ の タグ 内 に ソー スコ ー ド を 記述 する こと に よっ て 設定 し ます 。 

JavaScript 関連 で 使用 する タグ と 、 そ れ ら の タグ を 使っ て HTML ファ イル 内 へ の 
JavaScript を 記述 する 方 法 は 、 次 の 通り で す 。 





く script> の 使い 方 

HTML 内 に JavaScript を 記述 する に は 、<script> を 使用 し ます 。 

<script> 内 で 「language」 属 性 を 指定 する 時 に 、「language="JavaScript"| と 記述 し て お 
く と 、 プ ラウ ザ が その 中 に 記述 きれ て いる 文字 列 は JavaScript で ある と 判断 し て 実行 し 
ます 。 

Image オプ ジェ クト な どの JavaScriptl.1 を 使っ た スク リプ ト を 記述 する 場合 に は 、 
Ilanguage」 属 性 の 指定 を 「language="JavaScript1.1"] と し ます 。 こ う や っ て 指定 され た 
<script> 内 の スク リプ ト は 、Netscape Navigator 3.0 以上 な どの JavaScript1.1 に 対応 し た 
プラ ウザ で の み 実 行き れ 、Netscape Navigator 2.0 な どの JavaScript1.1 未 対応 の ブラ ウ 
ザ で は 実行 きれ ませ ん 。 

また 、Layer オプ ジェ クト な どの JavaScript1.2 を 使っ た スク リプ ト を 記述 する 時 は 、 
Iianguage」 属 性 の 指定 を 「language="JavaScript1.2"] と し ます 。 こ う や っ て 指定 され た 
<script> 内 の スク リプ ト は 、Netscape Navigator 4.0 な どの JavaScriptl.1 に 対応 し た ブラ 
ウザ で の み 実 行 さ れる よう に な り ま す 。 

同様 に 、JavaScriptl.3 を 使っ た スク リプ ト を 記述 する 場合 の 「language」 属 性 の 指定 は 
「 language="JavaScript1.3"] と な り ま す 。 こ う や っ て 指定 され た <script> 内 の スク リプ ト 
は 、Netscape Navigator4.5 な どの JavaScriptl.3 に 対応 し た プラ ウザ で の み 実 行 さ きれ ます 。 

この よう に 、 あ ら か じ め [language」 属 性 で JavaScript の バー ジョ ン を 記述 し て お け ば 、 
記述 し た バー ジョ ン に 対応 し て いな い プ ラウ ザ で は その スク リプ ト は 実行 され ませ ん 。 
これ に より JavaScript に 未 対応 の ブラ ウザ で 見 た 時 に 起こ る エラ ー を 回 避 す る こと が で 
きま す 。 

プラ ウザ は 、 基 本 的 に 自分 の 知ら な い タ グ を 無 可 し ます 。 そ の た め 、 JavaScript に 未 
対応 の プラ ウザ で JavaScript が 記述 し て いる ペー ジ を 見 る と 、 ソ ー ス 部 分 が 丸見え に 
な っ て し まい ます 。 

これ を 防ぐ た め 、 ス クリ プ ト の 1 行 目 を 「<!--」 に 、 最 終 行 を 「//-->」] と する こと に よっ 
て 、 ソ ー ス を コメ ント アウ ト し ます 。 JavaScript 未 対応 の ブラ ウザ で 閲覧 し て いる 人 に 
迷惑 を か ける こと が な いよ うに 、「 お まじ な い 」 と で も 考え て 必ず 記述 する よう に し て 
くだ きい 。 

具体 的 な <scrip> の 書き 方 は 、 次 の よう に な り ま す 。 

この 「jJavaScriptl.X の ソー ス ]」 の 部 分 に 実際 の スク リプ ト を 記述 し ます 。 ス クリ プ ト 
は 、HTML ファ イル に 記述 され て いる 上 か ら 順 に 評価 され 、 よ り 下 に 記述 され て いる 
も の が 優先 きれ ます 。 





田 JavaScript1.0 の 記述 法 
<SCrip 1anguage= "JavaSc エ ip も "> 
に で ーー 
JavaScript1 . 0 の ソー ス 
Ua 


</ SCrip キ > 


一 JavaScript1.1 の 記述 法 

<Script 1]anguage= "JavaScript1 .1"> 
ーー 

JavaScript1 . 1 の ソー ス 

こう 


</ Scr1p セ > 


田 JavaScript1.2 の 記述 法 

<sCript 1anguage= "JavaScript1 .2"> 
で == 

JavaScript1 . 2 の ソー ス 

ーッ 

< く / SCr1Dpt> 


田 JavaScript1.3 の 記述 法 
<SCript 1anguage="JavaScript1 .3"> 


コー 
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JavaSocript1 . 3 の ソー ス 
ーー 


< く / Script> 


Mozilla や Netscape 6.X 以降 で の <script> の 書き 方 

Netscape 6.0 以 降 と 、 そ の 元 と な っ た Mozilla で は 、ECMAScript を は じ め 、 
HTML4.0・CSS・XML・DOM な どの 多く の 標準 化 さ れ た 仕様 の 採用 と 、 そ れ の 100% 
互換 を 目指 し て いま す 。 そ し て 、 こ れ に 従っ て <script> の 記述 方 法 に も 変化 が あり ま 
す 。 具 体 的 に は 、HTML4.0 で は 「language」 属 性 は 不適 切 と な り 、 ス クリ プ ト の 指定 に 
は 「type」 属 性 を 使う よう に な っ て いま す 。 そ の た め 、Mozilla や Netscape 6.X で の 
<script> の 書き 方 は 、「type」 属 性 を 使い 、 次 の よう に な り ま す 。 


<SCrip type="Eext/ avaSCr1pt"> 
証 um 

JavaScript の ソー ス 

ん = 


</ SCr1pt> 
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また 、HTML4.0 の 仕様 に 従う の な ら 、<head> </head> 内 の 最初 で <meta> を 使っ 
て 、 ス クリ プ ト 言 語 を 指定 する 必要 も あり ます 。 
この 場合 の <meta> は 、 次 の よう な 設定 に な り ま す 。 


<meta htp-equ1V="Conten-Sor1pE-Type" content="Eext/Javascr1ipt"> 


し か し 、 こ の 記述 方 法 で は 、 ス クリ プ ト の バー ジョ ン 指 定 が うま く 行 えな いと いう 
問題 が 発生 し ます 。 た と えば 、「type] 属 性 内 で 「<script type="text/javascript: 
version=1.2">] と バー ジョ ン 指 定 を 行う と 、Internet Explorer 4.Xー 5.X や Netscape 
Navigator 4.X な ど 、 本 来 JavaScript1.2 が 実行 で きる プラ ウザ で も スク リプ ト は 実行 き 
れ ま せん 。 

未 サ ポー ト の バー ジョ ン の JavaScript か ら 来る 、 不 必要 な エラ ー を 回 避 す る た め に 
は 、 ス クリ プ ト の バー ジョ ン 指 定 は 大 変 に 有効 な 手段 で す 。 し か し な が ら 今後 は 、 こ 
こ で 紹介 し た 、 よ り HTML の 仕様 に 沿っ た [language」 属 性 を 使わ な い 記述 方 法 が 、 主 
流 に な っ て いく で し ょ う 。 


本 書 で の 「script」 タ グ 要 素 の 記述 に つい て 

HTML4.0 以降 、|scrip」 要 素 の [language」 属 性 が 不適 切 と され る よう に な り ま し た 。 
この こと は 、JavaScript を 指定 する タグ の 書き 方 に 関し て は 、 大 き な 変 更 と 言え ます 。 
確か に [Ianguage」 属 性 を 設定 する こと で 未 対応 の バー ジョ ン の JavaScript を 実行 で き な 
いよ うに する こと は 、 手軽 で と て も 有効 な 手段 で す 。 し か し 、Immternet Explorer に 加え 、 
Netscape 6.X を は じ め と し て 、HTML4.01 に 対応 し た ブラ ウザ も 増え て きま し た 。 ま た 、 
今後 発 表 き れ て くる 新しい プラ ウザ も 、HTML4.01 か それ 以降 の バー ジョ ン 











ト 





「language」 属性 の 記述 に つい て 

JavaScript を 記述 する 時 に 「language」 属 性 を 省略 し て 次 の よう に 記述 し て も 、 
Internet Explorer、Netscape Navigator どちら の ブラ ウザ も 、<script> 内 に 記 
述べ され た スク リプ ト を JavaScript と し て 解釈 し て 、 実行 し ます 。 


<8Cr1ipt> 

に 

JavaScript 上 の ソー ス 
MS 

</SCr1p セ > 


HTML4.0 で は 、「language」 属 性 は 不適 切 と な り ま し た 。 し か し 、「language」 
属性 を 設定 し て JavaScript の バー ジョ ン を 記述 する こと に より 、 そ の バー ジョ ン 
に 対応 し て いな い ブ ラウ ザ で 発生 する エラ ー が 簡単 に 回 避 で きま す 。 こ の こと か ら 
も 、HTML4.0 に 完全 に 準拠 し た HTML を 記述 する 場合 以外 で も 、「language」 属 
性 は きち ん と 設定 し て お くべ き で し ょ う 。 
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の HTML を サポ ー ト する こと に な る で あろ うこ と を 考え る と 、 現 段階 で は 、HTML4.01 
に 準拠 し た HTML を 記述 する よう に する べき で し ょ う 。 

ES その 考え か ら 、 本 書 で は 、body 要素 内 に 設定 する プラ ウザ の 背景 色 や 文字 色 な どの 
値 を 変更 する よう な 一 部 の スク リプ ト を 除き 、HTML4.0 以 降 の HTML に 準じ る こと に 
し ます 。 具体 的 に は 、<meta> で 「<meta http-equiv="Content-Script-Type' content="tex/ 
javascript > と し て JavaScript を 使用 し て いる こと を 宣言 し 、<script> も 「<script type= 
"textjavascript">| を 使用 し て いま す 。 


<noscript> の 使い 方 

<noscript> は 、JavaScript を 無効 に し て いる か 、 対 応 し て いな い プ ラウ ザ を 使っ て い 
る ユー ザー に 対し て メッ セー ジ を 表示 する 時 に 使用 し ます 。 

<noscript> は 、<script> 一 </script> 外 で 使用 し 、JavaScript が 有効 な 時 に は <noscript> 一 
<noscript> 内 の 記述 は 表示 され ませ ん 。 

具体 的 な <noscript> の 書き 方 は 、 次 の よう に な り ま す 。 





コメ ント の 書き 方 


JavaScript 内 で の コメ ント を 書く に は 、 次 の 2 通り の 方 法 が あり ます 。 

[| で は 以降 の 1 行 が 、「* ー 7] で は 間 に 挟ま れ た 文字 列 が 、 コ メン ト と し て 扱わ れ 
9 

ソー スコ ー ド を コメ ント アウ ト す る 時 に 最後 の 行 に 使用 する 「//->」 の 「//」 の 部 分 も こ 
れ に 当たり ます 。 

具体 的 な コメ ント の 書き 方 は 、 次 の よう に な り ま す 。 








文 の 区 切り 方 

[:」 は 文 の 区 切り を 表し ます 。 JavaScript で は 、 た と え 改 行 が あっ た と し て も 、「:] に 
よっ て 文 を 区 切っ て いな い 限 り 、 ひ と つの 文 と し て 扱わ れ ま す 。 

JavaScript は 、 基 本 的 に 「:」 を 省略 し て も 自動 的 に 文 の 区 切り が 判断 され て 、 ス クリ 
プ ト が 正常 に 処理 され ます が 、 ソ ー ス を わか りや すく する 意味 も 含め て 、 文 は 「:」 で 区 
切っ て お く こ と を お 勧め し ます 。 
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JavaScript の 外部 呼び 込み 方 法 

JavaScript は 、HTML ファ イル 内 に 直接 記述 する 方 法 以外 に 、 外 部 に スク リプ ト を 記 
述 し た ファ イル を 置き 、<scrip> 内 で 「src」 属 性 を 使用 し て URL を 指定 する こと に より 、 
それ を 読み 込ん で 実行 する こと が 可能 で す 。 指定 し た ファ イル 内 に は 、 前 後 の <script> 
を 省略 し た JavaScript の ソー スコ ー ド を 記述 し ます 。 こ の 時 の ファ イル 名 の 拡張 子 は 
「.js』 と し ます 。 





<SCr1pt sro="URL" type="text/javaScr1ip"></ Script> 


この 方 法 は 、 ス クリ プ ト の ソー スコ ー ド を 見 え に く くし た り ( 完 全 に 隠蔽 する こと は 
で きま せん )、 複 数 の ペー ジ で 同一 の スク リプ ト を 使用 する 場合 は 特に 有効 で す 。 た と 
えば 、 フ ァイル の 更新 日 時 を 複数 の Web ページ 上 に 表示 する よう な 場合 は 、 必 要 な 全 
ペー ジ に ひと つ ひ と つ ス クリ プ ト を 記述 する の で は な く 、 次 の よう に ファ イル の 最終 
更新 日 時 を 書き 出す スク リプ ト を 書い て 、 適 当 な 名 前 を 付け た 拡張 子 「.jsl の ファ イル 
を ひと つ 作 り ま す 。 後 は 、 全 ペー ジ に その ファ イル の URL を 指定 し た <script> を 、 表 
示し た い 位置 に 記述 する だ け で 済み ます 。 


document .write("Last update:",document .1astModi fied ) 


この 方 法 は 、mtemet Explorer 4.0 以降 、Netscape Navigator 3.0 以降 か ら 使用 可能 で す 。 

また 、 本 来 な ら ば 、<script> と 同様 に 「language 属性 を 使用 し て JavaScript の バー ジョ 
ン を 記述 する こと に よっ て 、 そ の JavaScript の パー ジョ ン に 対応 が と られ た 「.js] フ ァ イ 
ル し か 読み 込ま な いよ うに で きる は ず な の で す が 、 現在 その 機能 は 正常 に 動作 し ませ ん 。 

「js] フ ァイル を 置く Web サ ー バ ー に は 、MIME タイ プ の 設定 を し て お く 必 要 が あり 
ます 。 


MIME タイ プ の 設定 に つい て 

JavaScript の 外部 読み 込み を する た め に は 、 あ ら か じ め サ ー バ ー に MIME タイ 
プ の 設定 が され て な けれ ば いけ ませ ん 。 

た と えば 、Web サー バー に NCSAhttpd や Apache が 使わ れ て いて 、 ユ ー ザ ー 
の ホー ム デ ィ レ クト リ で 「.htaccesS]」 フ ァイル に よる 設定 が 許さ れ て いる よう な 

合 は 、 そ の 中 に 次 の よう に 記述 する こと に よっ て 設定 し ます 。 


AdqdType app1ication/x-]avascript .}s 


MIME タイ プ の 設定 に は 、 こ の 他 に も 色々 な 方 法 が あり 、「.htaccess」 フ ァ イ 
ル に よる 設定 を 行わ な く て も 、 プ ロバ イダ に よっ て は 初め か ら MIME タ イプ が 設 
定 さ れ て いる 場合 も わり ます 。 

MIME タイ プ の 設定 に 関し て は 、Web サー バー の 運用 に 関わ っ て くる 問題 も 含 
まれ る の で 、 サ ー バ ー 息 理 者 の 方 と 相談 する よう に し て くだ さい 。 
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引 オブ ジェ クト ・ プ ロ パ ティ ・ メ ソ ッ ド 


オブ ジェ クト 
JavaScript で は 、 ブ プラ ウザ の 各部 品 や 情報 を オプ ジェ クト と し て 取り 扱う こと が で き 
ます 。 そ し て 、 こ の オプ ジェ クト の 値 を 変更 し た り 、 値 を 調べ て それ に よっ て 違っ た 
処理 を 設定 する こと に よっ て 、 ブ ラウ ザ を 動 的 に 変更 する こと が で きる の で す 。 
JavaScript の オプ ジェ クト は 大 きく 分 ける と 、 プ ラウ ザ 自 身 が 本 来 持っ て いる 部 品 や 
情報 を 取り 扱う ナビ ゲー タオ プ ジ ェ クト と 、 独 自 に 組み 込ま れ た ビル トイ ン ( 組 み 込 
み ) オ プ ジ ェ クト の 2 種類 が あり ます 。 


圏 ナ ビ ゲ ー タ オブ ジェ クト 

プラ ウザ 自体 の 名 前 や バージョン と いっ た 情報 や 、 プ ラウ ザ に 表示 され る ドキ ュ メ 
ント 、 画 像 、 フ ォ ー ム な ど 、 プ ラウ ザ が あら か じ め 持 っ て いる 部 品 を 取り 扱う オブ ジェ 
クト の こと を 、 ナ ビ ゲ ー タ オプ ジェ クト と いい ます 。 

ナビ ゲー タオ プ ジ ェ クト に は 階層 関係 が あり 、 使 用 する 時 は その 階層 関 の 上 か ら 順 
番 に 「.」 で 区 切っ て 記述 し ます 。 た と えば document オプ ジェ クト は 、window オブ ジェ 
クト の ひと つ 下 の 階層 に ある オプ ジェ クト な の で 、「window.document」 と し て 表し ま 
す 。 た だ し 、1 番 上 の 階層 に な る window オプ ジェ クト は 、 省 略す る こと が で きま す 。 

ナビ ゲー タオ プ ジ ェ クト の 階層 関係 は 、 下 図 の 通り で す 。 


window screen navigator event 
Plugin MimeType 
Frame document location history 
Layer Link Image Area Anchor Applet Form 


Textarea Text FileUpload Password Hidden Submit Reset Radio Checkbox Button Select 
Option 
ナビ ゲー タオ ブ ジ ェクト の 階層 


画 ビ ルト イン オブ ジェ クト 
プ ブラ ウザ 自信 が 本 来 持っ て いる オプ ジェ クト の 他 に 、JavaScript が プラ ウザ に 独自 に 
組み 込ん で いる オプ ジェ クト が あり 、 そ れ を ビル トイ ン オ ブ ジ ェクト と いい ます 。 
JavaScript で は 、 日 付 や 時 間 な どの 時 を 取り 扱う Date オプ ジェ クト や 、 文 字 列 の 操作 
を 行う srring オプ ジェ クト な ど 、 多 く の ビ ルト イン オブ ジェ クト が 用 意 さ れ て いま す 。 
ユー ザー 独自 の オプ ジェ クト を 作成 し た り 、 ビ ルト イン オプ ジェ クト を 使用 する 時 
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は 、new 演算 子 を 使い ます 。 new 演算 子 に よる オプ ジェ クト の 作成 (イン スタ ンス の 作 
成 ) は 、 次 の 書式 で 行い ます 。 そ し て それ 以降 は 、「 オ ブ プ ジェ クト 名 」 で 指定 し た 名 前 を 
使っ て 、 オ プ ジ ェ クト の 操作 を 行う こと が で きる よう に な り ま す 。 


この オプ ジェ クト 名 は 、 一 定 の 条件 下 に お いて 、 ユ ー ザ ー 側 で 自由 に 設定 する こと 
が で きま す 。 


プロ パテ ィ 

オプ ジェ クト は 多く の 属性 を 持っ て お り 、 こ の 属性 の こと を プロ パテ ィ と いい ます 。 

プロ パテ ィ も また 、 オ プ ジ ェ クト で す 。 た と えば document オプ ジェ クト は 、 そ れ 自 
体 が オプ ジェ クト で ある の と 同時 に 、window オプ ジェ クト の プロ パテ ィ で ある と も い 
ます:a 

JavaScript で は プロ パテ ィ は オプ ジェ クト の 後に 「.」 で 区 切っ て 設定 し ます 。 


また 、 プ ロ パ ティ の 中 に は 、 ユ ー ザ ー が 値 を 設定 する こと が で きる も の が あり ます 。 
その よう な プロ パテ ィ に 値 を 設定 する 場合 は 、 次 の 書式 で 設定 し ます 。 


各 オ プ ジ ェ クト が どの よう な プロ パテ ィ を 持っ て いる か は 、 リ ファ レン ス の 「 ナ ビ 
ゲー タオ プ ジ ェ クト ](P.625)・「 ビ ルト イン オブ ジェ クト 」(P.642) を 参照 し て くだ さい 。 


メソ ッ ド 

メソ ッ ド は 、 オ プ ブ ジ ェクト に 対し て 動作 を 指定 し ます 。 

メソ ッ ド は 、 次 の よう に オプ ジェ クト の 後に 「.」 で 区 切っ て 設定 し ます 。 ま た 、 オ ブ 
ジェ クト に 値 を 設定 する 時 に は 、「0」 内 に 値 を 設定 する こと に よっ て 行い ます 。 


JavaScript の 各 オ プ ジ ェ クト が どの よう な メソ ッ ド を 持っ て いる か は 、 リ ファ レン ス 
の 「 ナ ビ ゲ ー タ オブ ジェ クト ](P.625)・「 ビ ルト イン オブ ジェ クト ](P642) を 参照 し て く 
だ さい 。 
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ユー ザー や スク リプ ト に よっ て ペー ジ が ロー ドド され た り 、 オ プ ジ ェ クト が クリ ッ ク 
され た り と いう よう な 、 特 定 の 動作 が 起こ っ た タイ ミン グ を イベ ント と いい ます 。 
JavaScript で は 、 イ ベン ト の 発生 を 取得 し て 、 そ の タイ ミン グ で スク リプ ト / の 実行 を 開 
始 す る こと が で きま す 。 

この イベ ント の 取得 を 行う も の を 、 イ ベン ト ハ ンド ラ と いい ます 。 

イベ ント ハン ドラ の 設定 は 、 そ の イベ ント ハン ドラ が 設定 可能 な オプ ジェ クト の 
HTML タグ 内 に 、 次 の よう な 書式 で 設定 し ます 。 


JavaScript で 用 意 さ れ て いる イベ ント ハン ドラ と 、 そ の イベ ント ハン ドラ が どの よう 
な イベ ント を 取得 し 、 ど の オプ ジェ クト に 対応 し て いる か は 、 リ ファ レン ス の 「 イ ベン 
ト ハ ンド ラ I」(P.619) を 参照 し て くだ さい 。 


levent オ プ ジ ェ クト に よる イベ ント の 取得 上 


JavaScript1.2 か ら は 、 イ ベン ト を オブ ジェ クト と し て 捕らえ る event オ プ ジ ェ クト が 
追加 され まし た 。 こ れ に より 、 イ ベン ト を 取得 し た い オ プ ジ ェ クト に 対し て 取得 する 
イベ ント を 設定 する こと に より 、 そ の オプ ジェ クト 上 の どこ か ら で も イベ ント の 発生 
を 取得 する こと が で きる よう に な り ま し た 。 ま た 、 取 得 し た イベ ント か ら は 、 そ の イ 
ベン ト の イベ ント タイ プ な ど 、 イ ベン ト に 関す る 色々 な 値 を 取得 する こと が 可能 で す 。 

イベ ント の 取得 は 、 次 の 用 法 で 設定 し ます 。 


JavaScript で 設定 で きる イベ ント タイ プ と 各 イ ベン ト が 設定 で きる オプ ジェ クト 、 イ 
ベン ト で 取得 で きる 値 、 つ まり event オプ ジェ クト の プロ パテ ィ に どの よう な も の が あ 
る か は 、 リ ファ レン ス の 「 イ ベン ト タ イ プ ](P.622) を 参照 し て くだ さい 。 


プロ パテ ィ や メソ ッ ド に 設定 する 値 は も ちろ ん 、 ス クリ プ ト が 返す 値 や 変数 定数 な 
ど 、 JavaScript で 取り 扱う 値 ( デ ー タ ) は 、 必 ず 何 ら か の デー タ 型 を 持っ て いま す 。 

JavaScript で 取り 扱え る 型 に どの よう な も の が ある か は 、 リ ファ レン ス の [JavaScript 
で 取り 扱え る 型 の 種類 ](P.608) を 参照 し て くだ さい 。 













一 連 の 処理 手続 を まとめ て 名 前 を 付け た も の を 、 関 数 と いい ます 。 
JavaScript で の 関数 は 、 大 きく 分 け て 関数 の 処理 を 定義 する 部 分 と 、 関 数 を 呼び 出す 


部 分 の ふた つの 部 分 か ら で き て いま す 。 
関数 の 処理 の 定義 は 、 次 の よう に 記述 し ます 。 


この 関数 名 は 、 一 定 の 条件 下 に お いて 、 ユ ー ザ ー 側 で 自由 に 設定 する こと が で きま す 。 

関数 の 呼び 出し は 、 ペ ー ジ 上 や イベ ント ハン ドラ 内 で 行い 、 関 数 の 処理 を 呼び 出し た い 
部 分 に 、「 関 数 名 (引数 引数 .…)] と 記述 し て 設定 し ます 。 こ うし て お け ば 、 ペ ー ジ が 読み 込 
まれ た 時 や 、 特 定 の イベ ント が 発生 し た 時 に 関数 の 処理 が 言 び 出 され 、 定 義 し た 関数 の 処 
理 が 実行 され ます 。 

引数 と は 、 そ の 名 の 通り 関数 の 処理 に 引き 渡す 値 の こと を いい ます 。 関数 の 処理 に 値 を 
引き 渡す 必要 が な い 時 は 、 引 数 を 設定 する 必要 は あり ませ ん 。 

通常 、 関 数 の 処理 の 定義 は <head> 内 で 行い 、 関 数 の 処理 の 呼び 出し は <body> 内 で 行い 
ます 。 こ れ は 、 関 数 の 定義 が 終わ ら な いう ち に 関数 が 呼び 出さ れる こと を 防ぐ た めで す 。 
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JavaScript に は 、 始 めか ら 定 義 さ れ て いる 関数 が あり 、 こ れ を ビル トイ ン 関 数 と いい 
ます 。 

ビル トイ ン 関 数 は 、 オ プ ジ ェ クト に 依存 する こと な く 、 ス クリ プ ト 内 の どこ か ら で 
も 使用 する こと が で きま す 。 

JavaScript で 用 意 さ きれ て いる ビル トイ ン 関 数 に どの よう な も の が ある か は 、 リ ファ レ 
ンス の 「 ビ ルト イン 関数 (top-level 関数 ) | (P.649) を 参照 し て くだ さい 。 
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変数 ・ 定 数 


変数 と は 、 値 を 入れ て お く 箱 の よう な も の と 考え れ ば いい で し ょ う 。 文字 列 や 数 値 、 
オプ ジェ クト ・ メ ソ ッ ド ・ プ ロ パ ティ 、 あ る い は 条件 式 な ど で 設 定 する 式 や 変数 な ど を 、 
変数 に 設定 する こと が で きま す 。 

変数 は 、 次 の よう に し て 設定 し ます 。 


var 変数 名 = 値 


変数 名 は 、 一 定 の 条件 下 に お いて 、 ユ ー ザ ー 側 で 自由 に 設定 する こと が で きま す 。 
まり 7 CA Ne は 

この よう に し て 設定 する と 、 右 辺 の 「 変 数 名 ] に 「 値 ] が 代入 きれ 、 以 降 「 変 数 名 ] を 使 
Ne 値 を 取り 出す こと が で きま す 。 

さら に 、 後 か ら 同 じ 「 変 数 名 ] に 値 を 設定 し 直す こと に よっ て 、 変 数 の 値 を 自由 に 変 
化 き せる こと も で きま す 。 

この よう に 、 値 を 設定 し 直す こと に よっ て 絶え ず 値 が 変化 する 変数 に 対し 、 変 数 に 
設定 する 値 の 方 は 変化 す る こと は あり ませ ん 。 こ の こと か ら 、 変 数 に 代入 する 値 の こ 
と を 定数 (リテラ ル ) と いい ます 。 


由 オプ ジェ クト 関数 ・ 変 数 な ど に 設定 可能 な 名 前 


オプ ジェ クト 名 ・ 関 数 名 ・ 引 数 名 ・ 変 数 名 ・ 定 数 名 は 、 以 下 の 条件 下 に お いて 、 ユ ー ザ ー 
側 で 自由 に 名 前 を 定義 むせ る こと が で きま す 。 





1. 大 文字 ・ 小 文字 の アル ファ ベッ ト 、 ある い は アン ダー スコ ア " "で 始ま る 文字 列 
(hamba,HAMBA, hamba な ど ) 

2. 日 本 語 (2 バ イト 文 字 ) は 使用 で き な い 

3. ス ペー ス ・ コ ンマ ・ 疑 問 符 ・ 引 用 符 は 使用 で き な い 

4. 文 字 列 内 に 数 値 を 入れ る こと は 可能 だ が 、 数 値 を 先頭 に する こと は で き な い 
("Hamba1" や "f_3hamba" は 可能 だ が 、"6hamba" は 不可 ) 

5. 大 文字 小文字 は 区 別 さ れる ("HAMBA" と "hamba" は 区 別 さ れる ) 

6. 予 約 語 は 使用 で き な い が 、 以 上 の 条件 を 満た し 、 予約 語 を 含む 文字 列 ("default" 
は 不可 だ が 、"Setdefault" は 可 ) 














予約 語 


シス テム 側 で あら か じ め 予 約 さ れ て いる 文字 を 予約 語 と いい 、 オ プ ジ ェ クト 名 * 関 数 


名 ・ 引 数 名 ・ 変 数 名 ・ 定 数 名 と し て 使用 する こと は で きま せん 。 
予約 語 に は 、 次 の よう な も の が あり ます 。 


abstract boolean break byte 
catoh char Class Const 
default delete do double 
extends false final finally 
for function goto if 
import in instanceof int 
long native new null 
private protected public return 
static SUDe「 Switch Synchronized 
throw throws transient true 
typeof Var VOid while 


M 演算 子 


値 の 計算 や 、 比 較 な ど に 用 いる 記号 の こと を 演算 子 と いい ます 。 


CaSe 
continue 
else 

float 
implements 
interface 
Dackage 
short 

this 

try 

with 


JavaScript で 使用 で きる 演算 子 に どの よう な も の が ある か は 、 リ ファ レン ス の 「 演 算 


子 」(P.609) を 参照 し て くだ さい 。 


# JavaScript の 命令 文 ( ス テー トメ ント ) 


JavaScript で は 、 文 や for 文 を は じ め 、 多 く の 命令 分 を 使う こと が で きま す 。 
JavaScript で 使う こと が で きる 命令 文 と 、 そ の 使い 方 に つい て は 、 リ ファ レン ス の 


[JavaScript の 命令 文 (ステ ー ト メン ト )](P.613) を 参照 し て くだ さい 。 
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ブラ ウザ 名 を 取得 する 


navigator.appYame [プロ パテ ィ ] 


太 e7ox 
Moz//a Internet Explorer 6.0 Firefox 1.0 
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* ブ ラウ ザ 名 を 取得 する っ * プ ラウ ザ 名 を 取得 する 





Mi ブラ ウザ 名 : h 
ブラ ウザ 名 :Mcrosoft Inemet Explrer プラ ウザ 者 et 
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「appName」 プロパ ティ は 、 プ ラウ ザ 名 の 値 を 持っ て いま す 。 

Internet Explorer や Opera は 「Microsoft Internet Explorer」 を 、 Netscape Navigator や 
計 。 Mozila、Firefox、Safari は 「Netscape」 を 返し ます 。 

較 識 = この プロ パテ ィ は 読み 出し 専用 で す 。 


E4-mac 


< く SCript type="Eext/]avascr1pt"> 
ベ 由 デー 





document .write(" ブ ラウ ザ 名 :" , navigator . appName ) : 
ん ーー テ 
く / SCr1D セ > 


ブラ ウザ の コー ド 名 を 取得 する 
navigator.appCodeame [プロ パテ ィ ] 


の 衣 涯 上 半 病 一 開 二 | 


Internet Explorer 6.0 9 いる RU 


アァ WOD 介 D に AO ウー ル D AM20⑳ CD mW RM 2 2- ル OD へ 2 
の の 回 還 人 の の we 副 5m20 生き - 飼 GB@owe 


ザ の コー ド 名 を 取得 する * ォ ブラ ウザ の コー ド 名 を 取得 する 


コー ド 名 :Mezils コー ド 名 :Moglls 





「appCodeName」 プロパ ティ は 、 プ ラウ ザ の コー ド 名 の 値 を 持っ て いま す 。 

Netscape Navigator や Mozilla、Firefox、Safari、Opera は 「Mozillal を 、Imtemet Explorer は 
「Mozilla/3.0 (compatible: MSIE 3.01: Mac_PowerPC)」 や 「MSIE」「Mozillal な ど を 返し ます 。 
この プロ パテ ィ は 読み 出し 専用 で す 。 


|Sompl 王 還 


<SCript ype="Eex 上 /]avasCrip 上 "> 
に 





document .write ("コー ド 名 :" ,navigator . appCodeName ) : 
// ーー テ > 
く / SCr1D キ > 


10 mw オジ ェクト 





ブラ ウザ の バー ジョ ン を 取得 する 


[プロ パテ ィ ] 





Internet Explorer 6.0 






当 C:\Samples\js\01nayjeator\D1navieator\D3\index.ht 


プア イル) 編集 E) 表示 ) お 気 に 和 D⑱ ツール ① ヘル プ ⑬ 
〇 の 回 回 人 @ の ww 5mog 


ォ * ォ ブラ ウザ の パー ジョ ン を 取得 する 














バー ジョ ン :40 (compatibls: MSIE 6.0: Windows NT 5.1: jstb 
702: SV1, .NET GLR 1.1.4322) 








191O い る 






Mozilla Firefox 同 回 IE 
アイ ル () 編集 人 E) 表示 ⑰ 移動 ⑬ ブッ クマ ー の が B) ツー ル ①D AM 半 


1 時 
ォ ブ ラウ ザ の バー ジョ ン を 取得 する 


パ バージョン:5.0 (Windowsi ja-]P) 








「appVersion]l プ ロ パ ティ は 、 プ ブラ ウザ の バー ジョ ン の 値 を 持っ て いま す 。 

この バー ジョ ン 番 号 は 、 プ ラウ ザ の バー ジョ ン 番 号 を 正確 に 表し て いま せん 。 Netscape 
6.X や 7.X、Mozilla、Firefox、Safari は 「5.0] を 、Intemet Explorer 5.X、6.X や Opera 7.X 
は 「4.0」] を 返し ます 。 ま た 、ImternetExplorer 3.X の 初期 の も の は [2.0」 を 返す 場合 が あり 
ます 。 

バー ジョ ン 番 号 の 後ろ に 、OS 名 、 イ ンタ ー ナ ショ ナル 版 ・U.S 版 な どの 種別 、CPU の 
種類 な どの 情報 が 付加 され ます 。 

この プロ パテ ィ は 読み 出し 専用 で す 。 


耳 ee 


<SCript type="text/ avascr1ipt"> 

に リー 

document .write ("バー ジョ ン :" , mavigator . appVersion) : 
//-ー テ > 

< く / SCr1D ヒ > 
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SS、 議 さ 
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に コ 
ei 
ベ 


Opera/ 


_A4.66 」 


Sa7a// 


Opera6 


圧 5-mac 
左 4-mac 


uid 
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ブラ ウザ の ユー ザー エー ジェ ント を 取得 する 
navigator.userAgent 





Internet Explorer 6.0 Firefox 1.0 


妥 C:Y5ampl pr\D4* 


アア イル 編 業 ) 表示 ⑰ お 気 に 和 ツーMD へ 2 e 麻 
@・ の 回 回 人 の の we 喜 hop 


ォ * ブ ラウ ザ の ユー ザー エー ジェ ント を 取得 する 


ユー ザー エー ジェ ント : Mozilla/5.0 (Windows: U: Windows NT 5.1: 
j-JP: ry:1.7.5) Gecko/20041108 Ftrefox/1.0 


ユー ザー エー ジェ ント : Mczils/40 (oompatibls: MSIE 6 0 
Windows NT 5 1: istb 702: SV NET CLR 1 1 4322) 





「userAgenll プ ロ パ ティ は 、 プ ラウ ザ の ユー ザー エー ジェ ント の 値 を 持っ て いま す 。 
ユー ザー エー ジェ ント と は 、HTTP の ヘッ ダー 部 分 に 付け られ て いる 文字 列 で す 。 
この プロ パテ ィ は 読み 出し 専用 で す 。 


<soript type="text/]avasCr1pt "> 

芝 員 ーー 

document .write ("ユー ザー エー ジェ ント :" ,navigator .userAgent ) : 
が バー コテ 

</ SCr1pt> 


ease sh 
プラ ッ ト ホ ー ム の タイ プ を 取得 する 


[プロ パテ ィ ] 









Internet Explorer 6.0 9 いる 【 り リ 


3 c.Y5amplesYjsY01nevieatorW0JnavieetorW05yndexht.。 同 | 還 | 孤 
アイル 昌克) 表示 お 気 に 入 D(⑱ ウー ル D へ ルプ ⑪ トコ 


Mozille Fwetox ー 后 | 区 


アル 電 要 ) 表示 ⑰ 電 和 ⑮ プッ マーク ツー ル D AA2 


OO 回 加 人 @ の me 支 Pmoo ゃ を - ゥ -G@ の om 


* ブ プラットホーム の タイ ブ を 取得 する 





* ォ プラットホーム の タイ プ を 取得 する 
お 使い の マシ ン の タイ プ :Wir32 





お 使い の マシ ン の タイ ブ :Win32 


「platform] プ ロ パ ティ は 、 プ ラッ ト フ ォ ー ム の タイ プ の 値 を 持っ て いま す 。 
サン プル で は 、 ユ ー ザ ー の 環境 に 合わ せ て 「Win32] や 「MacPPC」 と いっ た 値 を 表示 し ます 。 
JavaScript1.2 で 追加 され た 、 読 み 出 し 専用 の プロ パテ ィ で す 。 


ET 拉 ーー 


<script type="tex 上 /]avaScr1pt"> 

に (ーー 

document . write ( "お 使い の マシ ン の タイ プ :" ,navigator .p1atEorm ) : 
ん / ニ = テ 

</ SCr1D セ > 








ブラ ウザ の 使用 言語 を 取得 する 


[プロ バ パティ] 





Internet Explorer 6.0 












肥 C:\Samples\js\D1nayjeator\D1nayieator\06\imdexht. 司 | 大 | 


プア イル) 編集) 表示 お 気 に 入 D⑯ ツー- ル ①D ん ルプ ⑪ 
@ 京 ・ の - 還 国人 の の 時 宮 5m9 
* ブ ラウ ザ の 使用 言語 を 取得 する 


使用 言語 :undefned 














1913 い る 






ア O @ ま CO *FO PO フー20 WO 7200 の 
鐘 - 朝 @《@ の em 回 | 
ォ ブラウザ の 使用 言語 を 取得 する 
使用 言語 :ja-jP 
















[anguage」 プ ロ パ ティ は 、 ブ ラウ ザ の 「ja」 や 「en」 な どの LANG 属性 の 値 を 持っ て いま 
す 。 [編集] メニ ュー の [設定 ] 一 [Navigator] 一 [言語 ] か ら 設定 する こと が で きま す 。 
JavaScript1.2 で 追加 され た 、 読 み 出 し 専用 の プロ パテ ィ で す 。 

この プロ パテ ィ は 、Intemet Explorer で は 未 対応 で す 。 


EYE 一 


<SCript type="text/]avaSoript"> 


< く ! ーー 
document .write ( "使用 言語 : " ,navigator . 1anguage) : 
ニー を 


< く / SCr1Dt> 


77re7ox 
(の た 


Ope/aZ 
Ope7a6 


ト E)E//』 


< 詞 に 区 


ぷ *H 朋 半 計 直 療 一 平民 二 上 
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ブラ ウザ の 判別 を する 









[プロ パテ ィ ] 
[プロ パテ ィ ] 






Internet Explorer 6.0 191 コ (ひる RI 


アル 罰 本 6) 表示 ⑰ 物 和 (5 プッ 2 マー の ツー ル GD AMZ⑩ 5 
を - ゅ - 旬 G@omE 
* プ ラウ サザ の 判別 を する 


委 Cc\5amples\js\D1n, ator\01navn HLT は 41 Mozilla Fmrefox X 


アイ ル (上 弧 集 E) 表示 お 気 に 和 D⑯ ウール ①D へ M2⑪ 
の の 回 国人 6 の 時 誠 5mop 


ォ ブ ラウ ザ の 判別 を する 





お 便 V F 
お 使い の ブラ ウザ は Intsrmst Enbrsr 6X で すね の 24ADDWES34 





サン プル で は 、 ま ず プ ラウ ザ 名 の 1 番 始め の 文字 を 検索 し て 、 そ れ を 元 に Netscape 
Navigator、Safari、Firefox、Mozilla と 、Internet Explorer、Opera を 振り 分 る 処理 を 行っ 
て いま す 。 そ し て 次 に 、 バ ー ジ ョ ン の 1 番 始 め の 文字 や ユー ザー エー ジェ ント 内 に 含 
まれ る 文字 を 検索 し 、Netscape Navigator、Internet Explorer の 各 バ ー ジ ョ ン と 、Mozilla、 
Safari、Firefox、Opera を 判断 し 、 各 々 の ブラ ウザ 名 を 書き 出し て いま す 。 

プラ ウザ 名 の 1 番 始め の 文字 が 「N] の プラ ウザ の 中 で 、Netscape 6.X や 7.X、Mozilla、 
Safari、Firefox は 、 バ パー ジョン と し て 「3.0] を 返し ます 。 そ こ で サン プル で は 、 そ れ ら 
の プラ ウザ の ユー ザー エー ジェ ント に 含ま れる 「Netscape6/」[Netscape/7」「Safaril「Firefox」 
と いっ た プラ ウザ 固有 の 文字 列 を 検索 し て 、 各 々 の プラ ウザ を 判断 し て いま す 。 

また 、 プ ラウ ザ 名 の 1 番 始め の 文字 が 「M」 の プラ ウザ の うち 、Intemet Explorer 3.X は 、 
バー ジョ ン と し て 「2.0」 を 返す も の が ある の で 、 そ の 点 も 考慮 し て いま す 。 さ ら に 、 
Internet Explorer 4.X 以外 に も 、S.X や 6.X、Opera は 、 現在 バー ジョ ン と し て 「4.0」 を 返 
し ます 。 そ こ で サン プル で は 、 バ ー ジ ョ ン 情 報 の 中 か ら 、Intemet Explorer 5.X の 場合 
は 「MSIE 5$」、Intemet Explorer 6.X の 場合 は 「MSIE 6] と いう 文字 列 を 、Opera の 場合 は 
ユー ザー エー ジェ ント 情報 の 中 か ら 「Opera」 と いう 文字 列 を 検索 する こと に よっ て 、 
各々 の ブラ ウザ を 判別 し て いま す 。 


ETTU 東 ーー ーー ーー 


<SCrip tyDpe="Eext/]avaSsCr1p 上 "> 
2 貞 ニ ー 
if ( mayigator - appName . CharAt(0)=="N" ){ 
1f (mavigator .appVerson . Char ム ( 0 ) ==2 ) { document .write ( "お 使い の 
プ ブラ ウザ は Netscape Navigator 2.X で すね ") } 4 
1f (mavyigaor . appVersion . CharA ( 0 ) ==3 ) { document .write ("お 使い の 
プラ ウザ は Netscape Navigator 3.X で すね ") } 骨 




































1f (navigator .appVersion . CharA ( 0 ) ==4 ) { document .write ("お 使い の 
プラ ウザ は Netscape Navigator 4.X で すね ") } 4 
1f (navigator - appVer5ion . CharAt ( 0 ) ==5) { 

tf (navigator .-userAgent . indexOf ( "Netscape6/" ) != -1) {docu 
ment .write ("お 使い の プラ ウザ は Netscape Navigator 6.X で すね ") } 

else 【 

1f (navyigator .userAgent . indexOf ( "Netscape/7") != -1){ 

document .write ( "お 使い の プラ ウザ は Netscape Navigator 7.X で すね ") } 


< 
< 
else { ] 
由 


ye7ox 8 
7 


1f (navigaor -userAgent . indexOf ("Safar1" ) != -1){ 
document .write ( "お 使い の ブラ ウザ は safari で すね " ) } 
else { 
1f (navigator .userAgent . indexOF ("Firefox") != 
-1) {document .write( "お 使い の ブラ ウザ は Eirefox で すね ") } 
else { document .write(" お 使い の ブラ ウザ は Mozi11a1 . 
x で すね ") } | Sa ね // 
} 圧 5-ma 
} 左 4-ma 


} 
} 
1f ( navigator . appName .CharAt (0)=="M" ){ 
1f (navigator . appVersion .CharAt ( 0 ) ==2 ) { document .write( "お 使い の 
プラ ウザ は Tnternet Exp1orer 3.X で すね ") } 向 | 
1f (navigator .appVersion .CharAt ( 0 ) ==3 ) { document .write( "お 使い の 
プラ ウザ は Tnternet Exp1orer 3.X で すね ") } 4 
1f (navigator .appVersion . CharA (0 ) ==4 ) { 
if (navigator.userAgent . indexOf ("Opera" ) != -1) (document. 
write( "お 使い の ブラ ウザ は Opera で すね ") } 4 
else { 
1F (navigator .appVersion . indexOf ("MSTE 6") != -1) (doc 
ument .write ("お 使い の プラ ウザ は Tnternet Exp1orer 6.X で すね ") } 4 
else { 
1f (nayigaor .appVersion . indexOFf ( "MSTE 5") != 
-1 ) {document . write ( "お 使い の ブラ ウザ は Tnternet Exp1orer 5.X で すね ") } 
else {document .write ("お 使い の ブラ ウザ は Tnternet Exp1o 
rer 4.X で すね ") } 4 
} 


} 
//= ュ ーッ 
</ scr1ipt> 


Moz 罰 a 
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Ope/a/ 
Ope/a6 
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左 5-ac 
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ぷ 語 療 疲 和 義一 民 十 上 





Java が 使え る か どう か 判断 する 











[メソ ッ ド ] 












*java が 使え る か どう か 判断 する 
Java が 使え ます 
















作 現在 Java が 使え な (状態 で す ! ネッ トワ ー の 許 定 の Java の 項目 を チェ ッ ク し て くだ さい 





ブラ ウザ の 設定 で Java を 使え な いよ うに し た 場合 


サン プル で は 、「javaEnabled()」 メ ソ ッ ド で Java が 使え る 状態 に な っ て いる か を 判断 し 、 
使え れ ば 「Java が 使え ます 」 と 書き 出し 、 そ う で な けれ ば 警告 用 の ダイ アロ グ ボ ックス 
を 開き ます 。 

JavaScript1.1 で 追加 され た メソ ッ ド で す 。 


ER 


<SCr1p type="Eext/]avascr1p 上 "> 

に っ ニコ 

1f (navigator.javaEnab1ed( ) ) ( document .write( "Java が 使え ます ") } 
e1se window.a1ert ("現在 Java が 使え な い 状態 で す !! ネッ トワ ー ク 設定 の Java 

の 項目 を チェ ッ ク し て くだ さい ") : 骨 

//-ー テ > 


< く / Scr1D キ > 


(⑳2 alert0: 「window オブ ジェ クト 」 の [警告 用 の ダイ アロ グ ボ ックス を 開く 」(P.333) 


16 mwmer オ ラジ ェクト 





使用 可能 な MIME の タイ プ を 取得 する 


navigator.mimeTypes [オブ ジェ クト (配列 )] 
navigator.mimeTypes[n].type [プロ パテ ィ ] 
navigator.mimeTypes[n].description [プロ バテ ィ ] 
navigator.mimeTypes[n].suffixes [プロ パテ ィ ] 


ド じ IF TL: 


アイ 4 直人 D 表 CO 符 和 O プ あ 2Y-2 


年 - ゆ 人 @W@@omelo 


+ 使 用 可能 な MIME の タイ プ を 取得 する 
68 個 


タイ プ / 説明 / 拡張 子 

*/ Mozilla Default Plug-in /* 

applicatinn/x-director / Shockwave Movie / dir,dxr,dcr 
none / Reallukebox NS Plugin File / none 
audio/x-pn-realaudio-plugin / RealPlayer(tm) as Plug-in / 
Tp 

application/vnd.rn-realplayer-javascript / RealOne Player 
Javascript Plugin / .rpi 
application/x-java-applet:version=1.1.1 / java Applet / 
application/x-java-bean:version=1.1.1 / javaBeans / 
application/x-java-appletzversior=1.1 / java Applet / 
application/x-java-bean:version=1.1 / javaBeans / 
application/x-java-applet / java Applet / 
application/x-java-bean / JavaBeans / 
application/x-java-appletiversian=1.2 / java Applet / 
application/x-java-beanyersion=1.2 / ]avaBeans / 
application/x-java-appletiversion=1.1.3 / ]ava Applet / 
application/x-java-bean:version=1.1.3 / JavaBeans / 
application/x-java-appletiversion=1.1.2 / java Applet / 
application/x-java-bean:versior=1.1.2 / javaBeans / 
application/x-java-appletiversior=1.3.1 / java Applet / 
application/x-java-beaniversion=1.3.1 / javaBeans / 
application/x-java-applet:yerslon=1.4 / Java Applet / 
application/x-java-bear:version=1.4 / javaBeans / 
application/x-java-applet:version=1.4.1 / Java Applet / 
application/x-java-beanzyersion=1.4.1 / javaBeans / 
application/x-java-appletiversion=1.4.2 / ]ava Applet / 








サン プル で は 、「length] プ ロ パ ティ で MIME タイ プ の 数 を 出し 、 そ の ブラ ウザ で 利用 可 
能 な MIME タイ プ の 一 覧 を 作成 し て いま す 。 

「wpe」 プ ロ パ ティ は MIME の タイ プ を 、「descriptionm] プ ロ パ ティ は その 詳細 を 、「suffixes] 
プロ パテ ィ は 拡張 子 を それ ぞ れ 返し ます 。 

mimeTypes オブ ジェ クト に は 、 そ の 他 に も 「enablePlugin]( プ ラグ イン を 使う た め の 名 
前 を 返す ) と いう プロ パテ ィ が あり ます 。 

JavaScript1.1 で 追加 され た 、 読 み 出し 専用 の プロ パテ ィ で す 。 


re7ox 
Moz// 


トコ に 
に 3 に 
に 3 に 3 


に コ に コ 
Fo ES 
ベ 訪 


Opeya7 
Opeya6 


Sa ね 7/ 
圧 5-mac 


の ct 還 間 弟 承 ペー キ 代 二 
























2 


7e7ox 
り // の 2 た 
リル 
6.X 
4.06 
2.X 


documen 
document 
document 
for (1=0: 


document 
document 


} 
こつ コテ 


あめ 


document . 
document . 
-Write (nayigator .mimemypes [1] .description) 
-write(" / ".bo1d() ) : 

document . 
document . 


ーー 


<SCr1pt ype="Eext /JavaSCr1pt"> 


Var = navigator.mimemypes .1ength: 
document . 
-write(" 個 ".bo1d () ) : 

.write( "<p>" ) : 

write(" タ イプ / 説明 / 拡張 子 ".bo1d() ) : 
document . 


write( L ): 


write( "<br>") : 

<L: ュ ++) { 

Write (nayigator .mimeTmypes [1] .type) : 
write(" / ".bo1d() ) 


write (navigator .mimemypes [1] . sufixres ) : 
write( "<br>" ) : 


</ script> 


使用 可能 な プラ グイ ン を 取得 する 


navigator,plugins [オブ ジェ クト (配列 )] 
navigator.plugins[n].name [プロ パテ ィ ] 
navigator.plugins[n].filename [プロ パテ ィ ] 
navigator.plugins[n].description [プロ パテ ィ ] 










13 個 


名 前 / ファ イル 名 / 説明 

Mozlla Defsuk Plug-in / npnul32.dl| / Dcfsulk Plug-in 

Shockwave for Director / np32dswdll / Macromedia Shockwave for Director Netscape plug-in version 10.1 
Realjukebox NS Plusin / nprjplus.dll / Realjukebor Netscape Plugln 


ReslPlayertm) G2 LlyeConnect-Pnabled Plug-In (32-blt) / nppl3250.4l / RealPlayertm) LlweConnect-Fnbled Plug-In 二 





サン プル で は 、「length]l プ ロ パ ティ で プラ グイ ン の 数 を 出し 、 そ の プラ ウザ で 使用 可能 
な プラ グイ ン の 一 覧 を 作成 し て いま す 。 

[name」 プ ロ パ ティ は プラ グイ ン の 名 前 を 、「filename」 プロパ ティ は ファ イル 名 を 、 
「descripion]」 プ ロ パ ティ は その 詳細 を それ ぞ れ 返し ます 。 

JavaScript1.1 で 追加 され た 、 読 み 出 し 専用 の プロ パテ ィ で す 。 


ee 


<soript type="Etext/ avaScr1pt"> 

<!ーー 

Var 1 = navigator.p1ugins . 1engCh: 
document.write( L ): 

document .write(" 個 " .bo1d() ) : 

document .write("<p>" ) : 

document .write(" 名 前 / ファ イル 名 / 説明 ".bo1d() ) 
document .write ("<br>" ) : 

for(1=0: 1<L: ュ ++) { 

document .write (naviga て or .p1ugins [1] .name) : 
document .write(" / ".bo1d() ) : 

document .write (navigator .p1uging [1] .Ei1ename ) : 
document .write(" / ".bo1d() ) : 

document .write (navigator.p1ugins [1] .description) 
document .write( "<br>" ) : 


} 
// ニ ー テ 
</ SCr1D セ > 


② bold( : 「string オ ブ ジ ェクト 」 の 「 太 字 ( ボ ー ル ド ) に する 」(P.547) 
length : 「 複 数 の オブ ジェ クト で 使用 で きる プロ バテ ィ ・ メ ソ ッ ド 」 の 「 オ ブ ジ ェクト (配列 ) の 数 を 取得 す 
る 」(P.580) 





OpeyaZ7 
Ope/a6 


ト FE)EI7』 
圧 5-mac 


= 
目 目 還 上 
に 3 に 3 国 に > 


の 還 涯 層 半 知 一 圭二 上 
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プラ グイ ン が イン スト ー ル され て いる か が チェック す る 


navigator.plugins [オブ ジェ クト (配列 )] 
navigator.plugins[ ヵ ].name [プロ パテ ィ ] 












7 の 
Moz/a 














+ プ ラグ イン が イン スト ー ル され て いる か チェ ッ ク す る 9 
Opera7 Decfsult Plug-im が イン スト ー ル され て いま す 
Opeya6 
Sa ね / 計 に 過 > > 
随 寺 朗 。 ソイル で は 、 プ ラグ イン 配列 の 中 に 「Default Plug-in」 の 一 部 で ある 「efaultl] と いう 文 
字 列 が 含ま れ て いる か どう か を 検索 し て 、 含 まれ て いれ ば 文字 を 書き 出し 、 そ う で な 
けれ ば 警告 用 の ダイ アロ グ ボ ックス を 開い て いま す 。 
JavaScript1.1 で 追加 され た 、 読 み 出し 専用 の プロ パテ ィ で す 。 
主 <SCript type="Eex/]avascr1pt"> 
0 に し 
層 function CP]1ug(CP) ({ 
ゲ For (1=0: 1<navigator.p1ugins .1ength: 1++) { 
』 1f (navigator.p1uging [は ] .name . indexOf (CP) != -1) return 
情 true: 
報 } 
を return fa]se: 
痢 
す ーー 
る </ Script> 
中略 


<SCr1pt 上 ype="Eext/]avascr1p ヒ "> 
宙 王 


1f (CB1ug( "efau1t" ) ) { document .write("Defau1t Plug-in が イン ス 2 


れ て いま す *") } 

else window.a]ert ( "Defau1t Plug-in が イン スト ー ル され て いま せん ! !") : 
//-ー> 
< く / SCr1p キ > 


>] alert() : 「Window オ ブ ジ ェクト 」 の 「 警 告 用 の ダイ アロ グ ボ ックス を 開く 」(P.333) 
Index0f0: 「string オ ブ ジ ェクト 」 の 「 先 頭 か 文字 列 を 検索 する 」(P.558) 
length :「 複 数 の オブ ジェ クト で 使用 で きる プロ パテ ィ - メ ソ ッ ド 」 の 「 オ ブ ジ ェクト (配列 ) の 数 を 取得 す 
る ](P.580) 
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上 ゴリ) JaEN/ いり 贅 アル オヤ 4 
[メソ ッ ド ] 


[refresh)」 メ ソ ッ ド は 、 plugins 配列 を リフ レッ シュ し ます 。 こ の 時 に 真 (true) を 返す と 、 
それ 以降 <embed> で 指定 し て プラ グイ ン を 使用 する こと が で き 、 偽 (false) を 返し た 時 
は 、 プ ラグ イン の 配列 の 作り 直し の み を 行い ます 。 

JavaScriptl.1 か ら 追 加 さ れ た 、plugins オプ ジェ クト の メソ ッ ド で す 。 


EEC: 制 も 


navigator .p1ugins .refregsh(/ と rue/ チ a7se7 ) 









四 preference( ) [メソ ッ ド ] | 
「preference0」 メ ソ ッ ド は 、 ク ライ アン ト の preference の 設定 を 行い ます 。 


Signed Script 内 で 使用 可能 で す 。 
JavaScriptl.2 か ら 追 加 さ れ た メソ ッ ド で す 。 


OU0 間 ーーーーーーーーーー 


navigator .preEerence (認定 名 ) 
navigator .preEerence (設定 名 , 設定 大 ) 


じかに | 設定 名 設定 値 
Automatically load Images general.alwayS_IOad_images true false 
Enable Java security.enablejJaVa tue ifalse 
Enable JavaScript jaVaSCript. enabled true false 
Enable style sheets browser. enable_style_sheets true , false 
Enable gutoinstall 昌 autoupdate. enabled true false 
Accept a Cookies network. CoOkie. CookieBehavior 0 

Accept only cookies that getsent network, cookie. cookieBehavior 1 

back to the Originating SerVer 

Disable COOkies ー network.coo Cookie. cookieBehavior 記 ら 


Warn before accepting COOKie netWork.cookie.WarnAboutCookies true false 





の * ト 馬 居 評 弟 和 療 一 開 二 上 















[プロ バテ ィ ] 
[プロ パテ ィ ] 
[プロ パテ ィ ] 
[プロ バテ ィ ] 
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Mozills Frefox 


アル 直 要 ) 表示 ⑰ 和 生 ⑬ プッ 2Yー ク 6 
全 - ゆ - 傘 @@om 思 「 


* デ ィ ス プレ イ の サイ ズ を 取得 する 






ォ デ ィ ス ブレ イ の サイ ズ を 取得 する 
スク リー ン の 幅 (pizels): 1024 
スク リー ン の 高き (pixels):768 
使用 可能 な スク リー ン の 幅 (pixels):1024 
使用 可能 な スク リー ン の 高 さ (rixels):708 







Sa ね / 


スク リー ン の 幅 (pbals): 1024 
スク リー ン の 商 さ (ppel):768 

使用 可能 な スク リー ン の 幅 (pi): 1024 
使用 可能 な スク リー ン の 高 さ (pxels):708 






夏 5-7ac 
放 4-ac 





「width] プ ロ パ ティ と 「heighj] プ ロ パ ティ は 、 ス クリ ー ン 全体 の 幅 と 高き の 値 を 返し ま 
す 。「availWidthm] プ ロ パ ティ と 「availHeight] プロ パテ ィ は 、 ス クリ ー ン 全体 か ら Windows 
の タス ク バ ー の よう に 表示 で き な い 部 分 を 除い た スク リー ン の 幅 と 高 さ の 値 を 、 そ れ 
ぞ れ 返し ます 。 

Macintosh 版 の Intermet Explorer で は 、「screen.availWidth llscreen.availHeight が 正常 な 
値 を 返さ な い 場 合 が あり ます 。 

JavaScript1.2 で 追加 され た 、 読 み 出し 専用 の プロ パテ ィ で す 。 


| Sonir 


<SCr1pt type="Eex 上 /avascript"> 

に マー 

document .write ("スク リー ン の 幅 (pixe1s ) :" , screen .width) : 

document . write ( "<br>" ) : 

document .write ("スク リー ン の 高 さ (pixe1s ) :", screen .hetght ) , 

document .write( "<br>" ) : 

document .write ( "使用 可能 な スク リー ン の 幅 (pixe1s ) : ", screen .avai1Width) : 
document .write ("<br>" ) : 

document .write( "使用 可能 な スク リー ン の 高 さ (pixe1s) :", screen avai1Height ) : 
ビラ ョ シ 

< く / SC エ 1p キ > 


の ist 語 半 応寺 基 へ で いい 出 川 





ディ スプ レイ の 表示 情報 を 取得 する 


screen.pixelDepth [プロ パテ ィ ] 
[プロ パテ ィ ] 











Gt りり rd 







午 C:\Samples\js\D1na 
ファイル 編集 ⑥ 


@・ の 回 


ォ * デ ィ ス ブレ イ の 表示 情報 を 取得 する 









ディ ス ブ レ イ 深 度 (bits per pixeD: undefined 
使用 可能 カラ ー 数 (bit カ ラー):32 
Firefox 1.0 


じ 4II ET (1 


ディ スプ レイ 深度 (bits per pixeD:32 
使用 可能 カラ ー 数 (bit カ ラー):32 


「pixelDepth]l プ ロ パ ティ は 1 ピク セル あたり 何 ビ ッ ト の 情報 で 表示 する か の 値 を 、 
[colorDepth] プ ロ パ ティ は 表示 可能 色 数 の 値 を も 、 そ れ ぞ れ ビ ッ ト 数 で 返し ます 。 

た と えば 、256 色 の 場合 は 8、65.000 色 (Macintosh で は 32.000 色 ) の 場合 は 16 と な り ま す 。 
JavaScript1.2 で 追加 きれ た 、 読 み 出 し 専用 の プロ パテ ィ で す 。 

Intermet Explorer で は 、「pixelDepth] プ ロ パ ティ に 未 対応 で す 。 


<SCript type="text/avaScr1pt"> 

<! ニー 

document . write ("ディ スプ レイ 深度 (bits per pixe1 ) :" , screen .p1xe1Depth ) : 
document .write ( "<br>" ) : 

document . write ( "使用 可能 を カラ ー 数 (bit カラ ー) : " , screen .co1orDepth ) : 

ん / ご ここあ 

< く / SCr1D セ > 
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イベ ント の タイ プ を 取得 する 


event.type イベ ント の 種類 [プロ バ パティ] 


onClick=" スク リブ ト / 周 数 " [イベ ント ハン ドラ ] 
on1VIouseOut=" ス クリ ブ ト / 尉 数 " [イベ ント ハン ドラ ] 
onWMiouseDown=" ス クリ ブ ト / 尉 数" [イベ ント ハン ドラ ] 
onMiouseUp=" ス クリ ブ ト / 疾 数 " [イベ ント ハン ドラ ] 
onIouse0ver=" ス クリ ブ ト / 層 数 " [イベ ント ハン ドラ ] 





妥 CYSomplcWjsYnnavieatory03eyentyplWmndexhtml- 司 
ファイ MD 玉 要 表示 Q⑰ お 所 AO ツール D 2⑪ 
京 ・ の 店 人 の の ss 宮 pmco 


ォ イベ ント の タイ ブ を 取得 する 











Microsoft nternet Explorer 


あふ イベン トブ:clek 
| 王寺 


ア WO OS お FOO ツー ル D へ ルフ 
の 回 回 倒 の we 之 5mo 
* イ ベン ト の タイ ブ を 取得 する 

REEEssr コ 


snMsuseOut Eventl 









onMousaUp Event! 





enMoussOver EventU 








SnM6useOvar Evantl 





Microsoft nternet Explorer | 


作 イベン タプ :mouseove 
ーー] 


「type」 プ ロ パ ティ は 、 発 生 し た イベ ント の タイ プ の 値 を 持っ て いま す 。 

サン プル で は 、 フ ォ ー ム ヤリ ンク に 色々 な イベ ント ハン ドラ を 設定 し 、 イ ベン ト が 発 
生 し た 時 に 警告 用 の ダイ アロ グ ボ ックス に その イベ ント タイ プ を 表示 し て いま す 。 
「onClick」 は 、 オ ブ ジ ェクト が クリ ッ ク さ れ た 時 に イベ ント を 発生 し 、 イ ベン ト タ イ プ 
は 「click」 を 持ち ます 。 同様 に 、「onMouseOull は オプ ジェ クト か ら マ ウス カー ソル が 離 
れ た 時 に 発生 し 「mouseout」 を 、「onMouseDown」 は マウ ス ボ タ ン が 押し 下げ られ た 時 に 
発生 し |mousedown] を 、[onMouseUp」 は マウ ス ボ タ ン が 離さ れ た 時 に 発生 し [onmouseup」 
を 、「onMouseOverl は オプ ジェ クト 上 に マウ スポ イン タ が 来 た 時 に 発生 し onmouseover | 
を 、 そ れ ぞ れ 持 っ て いま す 。 

JavaScript1.2 で 追加 され た プロ パテ ィ で す 。 














ED 間 L-ーーーーーーーーーーーーーーー 一 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1> 
<head> 
<meta http-equ1tv="Content-Script-Type" content=" tex / avaSCr1pt 上 "> 
<meta http-equiv="Content-Sty1e-Type" conten=" て text/Cs8"> 
< 上 1 上 1e></ ヒ 1 上 ]1e> 
<sty1e type="Eext/css"> 
で ル ニー 
body { background-co1or: #EFEFfF: } 
ーー テ 
</ style> 
</head> 
<body> 
* ォ イベ ント の タイ ブ を 取得 する 
く D> 
<fForm> 
<input type="butEton" value=" onC1ick Event!! ! onC1iok="a1er モ (! 
イベ ント タイ プ :'+ event .type) "> < 
</ Eorm> 
< く /p> 
< く D> 
<a href="#" onMouseOut モ ="a1ert ("イベ ント タイ プ :'+ event .type) "> 
onMouseOut Even!! 
</a> 
< く /p> 
<D> 
<a href="#" onMouseDown="a1ert ("イベ ント タイ ブ :'+ event .type) "> 
onMouseDown Event!! 
</a> 
< く /p> 
< く D> 
<a href="#" onMouseUp="a1ert ("イベ ント タイ プ :*+ event .type) "> 
onMouseUp Event!! 
</a> 
< く /p> 
< く D> 
<a href="#" onMouseOver="a1ert(' イ ベン ト タ イ プ :"+ event .type) "> 
onMouseOver EVent!! 
</a> 
< く /p> 
</body> 
</htm1> 


OperaZ 
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どこ で イベ ント が 発生 し た か を 取得 する 


イベ ント た .type イベ ント の 種類 [プロ パテ ィ ] 
プペ ン ト た .screen 双 ディ スプ レイ の X 軸 の 値 [プロ パテ ィ ] 
イベ ント た .screenY ディ スプ レイ の Y 軸 の 値 [プロ パテ ィ ] 
イベ ント た .page 叉 ウィ ンド ウ の X 軸 の 値 [プロ バ パティ] 
イベ ント た .pageY ウィ ンド ウ の Y 軸 の 値 [プロ バテ ィ ] 
ブ ブ ジ ェクト た .onmousedown= スク リブ た / 財 数 [イベ ント ] 













[screenX」 プ ロ パ ティ と 「screenY」 プ ロ パ ティ は イベ ント が 起こ っ た ディ スプ レイ 上 の X 
軸 と Y 軸 の 値 を 、「pagex」 プ ロ パ ティ と 「pageY」 プ ロ パ ティ は イベ ン ト が 起こ っ た ウィ 
ンド ウ の 表示 領域 上 の X 軸 と Y 軸 の 値 を 、 そ れ ぞ れ 持 っ て いま す 。 

サン プル で は 、 マ ウス ボタ ン が 押さ れ た 時 に 、 イ ベン ト タ イ プ |document.onmousedown 
に よっ て イベ ント を 取得 し て 関数 [eve1)」 を 発生 きせ 、 関 数 の 処理 で 発生 し た イベ ント 
が 持っ て いる プロ パテ ィ の 値 を 取り 出し 、 そ れ を 警告 用 の ダイ アロ グ ボ ックス に 表示 
し て いま す 。 

JavaScript1.2 で 追加 され た 用 法 で す 。 

Imtemet Explorer は 、 イ ベン ト の 取り 扱い 方 法 に Netscape Navigator と 違い が あり ます 。 
「 mternet Explorer で の event オプ ジェ クト の 使用 法 」( 右 ペー ジ ) も 合わ せ て 参照 し て く 
だ さい 。 


Lomplc 


<Scr1pt type="Eext/]Javascript"> 
SS ドニー 
function eve1(e) { 
alert ( "イベ ント "+e.type +" が 発生 し まし た " + "n" + 
"スク リー ン の 座標 :" + e.screenx + "\n' + 
"スク リー ン の Y 座 標 :" + e.scceeny + "\n' + 
"ウィ ンド ウ の X 座 標 :" + e.pagex + "\n" + 
"ウィ ンド ウ の Y 座 標 :" + e.pagey ): 
return 上 ruG: 





} 


documnent . OnmOuSedowm = GVG1: 


// ニ = テ 


2 イベ ント タイ ブ 一 覧 : リ ファ レン ス 「 イ ベン ト タ イ ブ ](P.622) 


</ SC エ 1D ヒ > 


Internet Explorer で の event オ ブ ジ ェクト の 使用 法 

Internet Explorer の サポ ー ト し て いる JScript を 使用 し て も 、Internet Explorer 
4.0 か ら は 、Netscape と 同様 に event オ ブ ジ ェクト を 使用 し て 、 ウ ィ ン ド ウ 上 の 
どこ で イベ ント が 発生 し て も 、 そ の イベ ント を 取得 で きま す 。 し か し 、 オ ブ ジ ェ ク 
ト の 取り 扱い 方 な ど に 、Netscape と 微妙 な 違い が あり ます 。 

取得 する イベ ント を 設定 する 方 法 は Netscape と 同じ で す 。 し か し 、Netscape 
の event オ ブ ジ ェクト が 直接 イベ ント か ら イ ベン ト に 関す る 情報 を 取り 出す の に 対 
し 、Internet Explorer の event オ ブ ジ ェクト は window オブ ジェ クト の プロ パテ ィ 
な の で 、「window.event. プ ロ パ ティ 」 の 用 法 で イベ ント の 情報 を 取得 する こと が で 
きま す 。 

次 の サン プル は 、「 ど こ で イベ ント が 発生 し た か を 取得 する 」 を Internet Explorer 
で 使用 で きる よう に し た も の で す ( こ の サン ブル の 内 容 は 、CD-HROM の 中 の 「jS」- 
「column」-「ie_event」 の 中 に 収録 し て あり ます )。event オ ブ ジ ェクト の 設定 方 法 
の 違い に 注目 し て くだ さい 。 ま た 、 プ ロ パ ティ に も 「pageX」 や 「pageY」 の よう に 
Netscape の み で サポ ー ト され て いる も の や 、「offsetX」 や 「offsetY] の よう に 
Internet Explorer の み で サポ ー ト され て いる も の が ある の で 、 注 意 し て くだ さい 。 


<Script ype="text/]avascr1pt"> 
<!-ー 
function eve1 () { 
alert ( "イベ ント "+window.event .type +" が 発生 し まし た " " ま n" 
"スク リー ン の XX 座標 :" + window.event .screenX + "\m" 
"スク リー ン の Y 座 標 :" + window.event . screenY + "\n" 
"ウィ ンド ウ の X 座 標 :" + window.event .offsetX + "\m" 
"ウィ ンド ウ の Y 座 標 :" + window.event.oFfFsetY ): 
return rue: 
} 
document . onmousedowm = GeVe1 : 
PA 
</ Script> 
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ロケ ルル ん 1 レル AP の ra が エド) 


旧記 胡 に と コ ュ き g 9 


* ド ラッ グ & ド ロッ プ し て いい か 確認 する 


この ファ イル を 表示 し て も いい で すか が? 


イベ ント 「ondragdropl」 は 、 ウ ィ ン ド ウ 上 で 画像 や HTML ファ イル な どの ドラ ッ ク & ド 
ロッ プ の 動作 が 行わ れ た 時 の イベ ント を 取得 し ます 。 

サン プル で は 、 画 像 や リン ク を ウィ ンド ウ 上 に ドロ ッ プ し た 時 に 、「window.ondragdrop」 
に よっ て イベ ント を 取得 し て 関数 [eve10」 を 発生 させ 、 関 数 の 処理 で ファ イル を 表示 し 
て いい か どう か を 確認 する ダイ アロ グ ボ ックス を 開い て いま す 。 

た だ し 、Windows 95 版 の Netscape Navigator 4.X は 、 画 像 の ドラ ッ グ ドロ ッ プ に 対応 
し て いま せん 。 

JavaScript1.2 で 追加 され た 用 法 で す 。 





「 


EE 二 ox マ テ 3333 っ T キ hkF【X オ ーー 

【 ド ラッ グ & ド ロッ プ さ れる ウィ ンド ウ 】 

<!DOCTYPE HTMTL PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta http-equ1v="Content-Script-Type" content=" text/]avascr1pt "> 
<meta http-equ1v="Content-Style-Type" Conten=" て ex 上 /cCsS"> 

< 上 1 上 1e></ 上 it 上 1e> 


<script ype="text/]avaSsCr1pt"> 
に 
function eve1() { 
FE ( confirm ( "この ファ イル を 表 \ 示 し て も いい で すか が ?") ) ( 
reurm 上 TUG: 
} 
return fa]se: 
} 
window .ondragdrop = eve1: 
ん / ニ = タ 
</ SCr1pt> 


</head> 

<jbody> 

ょ ドラッグ g ドロ ッ ツ プ し て いい が 確認 する 

<D> 

<a href="NewWin .htm1" target="_Open"> ウィ ンド ウ を 開く </a> 
< く /p> 

</jbody> 

</htm1> 


【 ド ラッ グ & ド ロッ プ 元 の ウィ ンド ウ 】 
<!DOCTYPE HTMI, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm1> 

<head> 

<meta http-equiv="Content-Style-Type" content="text/CSs8"> 

< 上 it]1e></ 上 11e> 

</head> 

<body> 

<p>* 元 の ウイ ンド ウ に ドラ ッ グ g ドロ ッ プ し て くだ さい </p> 

<D> 

<1mg sro="1mage.Jpg" name="eve04" a1t="image.]pg" width="100" 2 
ght="100"> 

く /p> 

<a href="http : / /www .netscape . com/ ">Netscape 社 の HomePage へ . . .</a> 
</body> 
</htm1> 
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の el 馬 癌 部 訂 マ うさ 人 


どの キー が 押さ れ た か を 取得 する 
イベント た .which [プロ パテ ィ ] 
オブ ジェ クト た -onkeydown= スク リプ ト / 尉 数 [イベ ント ] 





















「which]l プ ロ パ ティ は 、 イ ベン ト 発生 時 に 押さ きれ た キー の ASCII の 値 を 持っ て いま す 。 
サン プル で は 、 キ ー が 押さ きれ た こと を 「document.onkeydown」 に よっ て イベ ント と し て 
捉え 、「which] プロパ ティ の 値 を 警告 用 の ダイ アロ グ ボ ックス に 表示 し て いま す 。 

その 時 、ASCII の 値 の まま で は 「al」 の キー は 「65$」、「b]」 の キー は 「66] と いっ た コー ド 番 
号 な の で 、 そ れ を string オプ ジェ クト の 「fromCharCode」 メ ソ ッ ド を 使用 し て 英 数 字 に 
変換 し て いま す 。 

な お 、Intemet Explorerr で キー の コー ド 番 号 を 取得 する 場合 は 、「keyCode」 プ ロ パ ティ 
を 使い 、「window.event.keyCode」 と し ます 。 

JavaScript1.2 で 追加 され た 用 法 で す 。 


| Sanplc 王 還 


<script type="EexE/]avascript"> 

に 

Function eve1 (e) { 
alert ( String.fromCharCode(e.which) + ": キ ー が 押さ れ ま し た ") , 
returnm rue: 

document .onkeydown = eVe1 : 

2/ コ ェ ァ > 

< く / SCr1pt> 


32 StringromCharCode0: [string オ プ ジ ェ クト J の [ISO-Latin-1 の コー ド 番 号 を 文字 に 変換 する 」(P56 
イベ ント タイ ブ 一 覧 : リ ファ レン ス 「 イ ベン ト タ イ ブ ](P.682) 


200 wew オ プシ ェクト 


ウィ ンド ウ の 位置 と サイ ズ を 国定 する 





オブ ジェ クト た .onmove= スク リブ ト / 鉛 数 [イベ ント ] 
オブ ジェ クト .onresize= スク リブ た / 鐘 数 [イベ ント ] 


Internet Explorer 6.0 Firefox 1.0 


イル OO の 
QOE の 回 る 


ャ ウィン ドウ の 位置 と サイ ズ を 固定 する 





イベ ント の 「onmove」 は ウィ ンド ウ が 移動 し た 時 の 、「onresizel は ウィ ンド ウ の サイ ズ が 
変更 され た 時 の イベ ント を 取得 し ます 。 

サン プル で は 、 ま ず HTML ファ イル が 読み 込ま れ た 時 に 、 デ ィ ス プレ イ の 上 か ら 30 ピ 
クセ ル で 左端 か ら 50 ピク セル の 位置 へ 、Internet Explorer で は 外周 が 、Netscape 
Navigator で は 表示 領域 が 、400 ピク セル ※ 400 ピク セル に な る よう に 、 ウ ィ ン ド ウ の 
位置 と サイ ズ を 変更 し て いま す 。 そ し て それ 以降 、 ウ ィ ン ド ウ が 動か され た り 、 ウ ィ 
ンド ウサ イズ が 変更 され た 時 を 、 そ れ ぞ れ イ ベン ト と し て 取得 し 、 再 び 同 じ 位 置 と サ 
イズ に ウィ ンド ウ を 戻し て いま す 。 

Windows 版 の Netscape Navigatorr で は 、 ス クロ ー ル バー が 表示 され た 時 に も |onresize」 
イベ ント が 発生 する の で 、 注 意 し て くだ さい 。 ま た 、Netscape 6.X 以降 や Internet 
Explorer で は イベ ント |onmove」 を 取得 で き な い の で 、 ウ ィ ン ド ウ の 位置 を 固定 する こ 
と は で きま せん 。 

JavaScript1.2 で 追加 され た 用 法 で す 。 
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<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 


<htm1> 
<head> 


<meta hp-equ1 マ ="ConEent-Script-Type" content="text /]avascr1ipt"> 
<meta http-equ1 マ ="Content-Sty1e-Type" content="text/css"> 


< 上 1 上 1e></ 人 上 1 上 1e> 


<SCript type=" て ex 上 / avaScr1p"> 
で こと 

window .moveTo(50, 50) : 
window.resizeTo(400,400): 
function eve1 ( ) 
function eve2 ( ) 
window.onmove = eve1: 
window.onregize = eve2: 
パニ ニテ 

</ Script> 


<sty1e ype="Eext/css"> 
に 
jbody { background-co]1or: FEFFFF: 


ーー テ 


</ style> 

</head> 

<body> 

* ウィ ンド ウ の 位置 と サイ ズ を 固定 する 
</body> 


</htm1> 


{ window .moveTo(50,50) } 
{ window.resizeTo(400,400) } 


} 


モリ:【 ソ た - を を = レル: ジル ン ル く -] ト < 





alert( 文 字 列 ) [メソ ッ ド ] 
onClick=" ス クリ ブ ト / 閣 数 " [イベ ント ハン ドラ ] 





呈 CYSamplesYjeY01ng 


アイ ル 編 業 ) 表示 お 気 に 和 D⑯ ウー ル Q① へ M プ 0⑪ 
の 回 届 人 の の 安 pm9 


* 警 告 用 の ダイ アロ グ ボ ックス を 開く 


し 注 弄 に に を 592233 と 」、」 






atorYD4wmdowY01\indexhtml 記 X 


「aler(0」 メ ソ ッ ド は 、 警 告 用 の ダイ アロ グ ボ ックス を 開き ます 。 

サン プル で は 、 ボ タン を クリ ッ ク し た 時 に イベ ント ハン ドラ 「onClick」 が 関数 [EVENT2()」 
を 発生 し 、 ダ イア ログ ボッ クス を 開い て いま す 。 

利用 者 に 注意 を うな が す 時 な ど に 使用 し ます 。 


Ll 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1><head> 
<meta http-equiv="Content-Socript-Type" content="tex 上 /]avaSCr1Dt"> 
<meta htp-equ1v="Content-Sty1e-Type" conten キ ="text/cCss"> 
< 上 it]e></ 上 1 上]e> 
<Script ype="Eext/ avaScr1pt"> 
ベリ ーー 
function EVENT1 ( ) { window.a1ert ("アラ ー ト ウィ ンド ウ が 開き ます !!") } 
こっ な 
</ SCriD セ > 
て 中 略 て 
</head><body> 
* 警告 用 の) ダイア ログ ボッ クス を 開く 


く D> 




















<form> 

<input type="button" value=" 注意 !! ここ を クリ ッ ク す る と " RE 
NT1( ) "> 

< く / form> 

< く /p> 

</body></htm]> 


(⑳ TIPS : [alert0」 メ ソ ッ ド を 使い すぎ て いま せん か ?」(P.335) 
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wa 較 


ドジ ス に に メソ た ちあ = レ ん シル ル . く コト < 


confirm( 文字 丈 ) [メソ ッ ド ] 











Before 












当 Cc*5amplesYjs\01navieator\04window\02\indexhtml 過 


アイ ル F) 編集 表示 ) お 気に入り (⑳ ウール ① ヘル プ ⑩ 
OR の 由 人 の の wm 吉 mmo 


4 大 認 ボ タ 











付き の ダイ アロ グ ボ ックス を 開 < 








ァイル) 編集 表 
京 ・⑨ 回 回 人 の の wt 嘉 5mo 





「confirmO)]」 メ ソ ッ ド は 、 確 認 ボ タン 付き の ダイ アロ グ ボ ックス を 開き ます 。 

確認 ボタ ン の 名 称 は 、Windows で は [OK] と [キャ ン セ ル ]、Macintosh で は [Yes] と [No] 
で OS に よっ て 違い ます 。 

[OK] ま た は [Yes] の ボタ ン が 押さ れ た 時 は 真 (true) の 値 を 、[ キ ャ ン セ ル ] ま た は [NGo] 
の ボタ ン が 押さ れ た 時 は 偽 (false) の 値 を 返し ます 。 

サン プル で は 、 押 され た ボタ ン に よっ て 違う ペー ジ が ロー ド さ れる よう に な っ て いま 
す 。 実際 に 試す 場合 に は 、 こ の 他 に も 「wpl.hml」 と 「wp2.html」 を 用 意 し て くだ さい 。 































ET IIR_TKn5 ワ 5 キキ ドキ トド ト + ユ テニ hn ユ つっ 2 {へ 


< く !DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm1> 
<head> 
<meta http-equ1V="Content-Script-Type" content=" て text/avascr1pt"> 
<meta htp-equ1v="ConEent-Style-Type" content="Eext/css"> 
<t 上 it 上 1e></ 上 1]1e> 
<SCr1p type="text/]avascript"> 
則 = 
function EVENT3 ( ) { 
if ( conEirm ("OK(yes) .Cance1 (No) ボタ ン 付 き ダ イア ログ ボッ クス ") ) ド 
1ocation .href="wp1 .htm1" )} 
else { 1ocation .hrefF="wp2.htm1" } 


Opeya/ 


Ope/a6 


} 
た の ーー 生 Sa7a// 
</ Script> 左 5-7jac 
<sty1e type="text/css"> 左 2-max 
革 小 守 

jbody { background-co1or: #EFFFfFF: } 
1 

</sty1e> 

</head> 

<body> 

* 確認 ボタ ン 付 き の ダ イア ログ ボッ クス を 開く 


< く D> 


<fForm> 
<1nput type="button" value=" Open " onC1ick="EVENT3 ( ) "> 
</ form> 
</p> 
</body> 
</htm1> 








「alert()」 メ ソ ッ ド を 使い すぎ て いま せん か ? 

「document.write()」 な ど を 使っ て 長い 文章 を 書き 出し た 時 に 、 ブ ラウ ザ の バー 
ジョ ン に よっ て は 、 エ ラー が 発生 する 時 が あり ます 。 

これ は 、Netscape Navigator が 1 行 中 に 1 バイ ト 文 字 で 255 字 まで 、 ら バイ 
ト 文 字 だ と その 半分 の 文字 し か 扱え な か っ た こと か らく る 問題 で す 。 

この 問題 を 回 避 す る た め に 、「document.write( 文字 列 AT" 文 字 列 B)] と いっ た 
具合 に 、JavaScript で 書き 出す 文章 は 短く 分 ける こと を お 勧め し ます 。 
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p TDMIMUDDUHUUDUAMAULUUUUAUMUUMTSSOULII 


アイ ル (⑥ 建 集 ) 表示 お 気 に 和 O⑯ ツー ル (D へ プ ⑩ 
@・ の 回 還る の 和 支 5mo 
* 入 力 欄 付 き の ダ イア ログ ボッ クス を 開く 


ヒー ス 279277925220 





TU SSL アァ /) 


I X 
ス ブ トブ プロンプト. 
お 0 け き な URL を 入力 し た 祖 [OK] ポタ ン を 押し て く が さい 


lxplerpr た サー ブロン フト 


スプ トブ ロン ブ ド 
お 97 な URL を 入力 し た 【OK] ポ タン を 押し て くだ さい 








Fessytemcop7 


After 
生 p //wmm humwyeem co 


イル) 引 集 (5) 表示 お 気に入り @⑩ ウ - ル D へ 2⑪ 


G 呈 ・ の ・ 回 還る の we 支 imoo 





「prompt0]」 メ ソ ッ ド は 、 入 力 欄 付 き の ダ イア ログ ボッ クス を 開き ます 。 

「prompt( ウ ィ ン ド ウ 内 に 表示 する 文字 列 , 入 力 ボッ クス 内 の 初期 値 )」 と 指定 し ます 。[OK] 
ボタ ン が 押さ れる と 入力 欄 付き ダイ アロ グ ボ ックス 内 の 値 が 代 人 され 、[ キ ャ ン セ ル ] 
ボタ ン が 押さ れる と null の 値 を 返し ます 。 

サン プル で は 、 入 力 欄 に 何 も 入 力 さ れ て いな か っ た り 、 初 期 値 の まま だ っ た り 、[ キ ャ 
ン セ ル ] ボ タン が 押さ れ た 時 に は 、「alert0」 メ ソ ッ ド で 警告 用 の ダイ アロ グ ボ ックス を 
開き ます 。 そ れ 以 外 の 場合 は 入力 され た URL を ロー ド し 、 も し その 時 に 入力 され た 
URL が 不正 な 場合 は ブラ ウザ 自身 が 警告 を し ます 。 















Em ュー 


<!DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta htEp-equ1v="Content-Scr1pt-Type" content="tex/]avascript"> 
<meta http-equ1v="ConEtent-Sty1e-Type" conEtent="text/css"> 

< 上 1 上 ]1e></ 上 1 上 1e> 


<SCript type="text/]aVvascr1p ヒ "> 
ぐさ 江 = ニ ニ 
function EVENT4 () { 
CME 
7 の 計 7 
1f (!(PRO=="" | | PRO==nu1] | | PRO=="http://")) ( NR 
href=PRO } 
else ( alert ("な に も 入力 され て いな いか 、[Cance1] ボ タン が 押さ れ ま し た ") } 


Sa7 ね // 
/5-7 

} /E.m 
7/-ー> 


</ Script> 


<sty1e type="text/Css"> 

Si こつ 

body { background-co1or: #FFFFfFF: } 
ーー テ 

</style> 


</head> 
<body> 
* 入力 欄 付 き の ダ イア ログ ボッ クス を 開く 
<D> 
<form> 
<1nput type="button" va1ue=" 入力 欄 付 き の ダ イア ログ ボッ クス " 夫 6M 
="EVENT4 ( ) "> 
</ Form> 
く /Dp> 
</body> 
</htm1> 


53 新しい ウィ ンド ウ を 開く 


5.0 
/E4.0 Windowr.open(" ER" ウィ ンド だ の 名 "。" 属 燈 ") 
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サイ ズ 指 定 有 り *toolbar=yes 
*lpcation=yes 
*directorybuttons=yes 








31 エピ ュ タ 








の + 寺 閉 層 テト 用 





新しい ウィ ンド ウ を 開く に は 、「window.open("URL"." ウ ィ ン ド ウ 名 "属性" り ]」 メ ソ ッ ド 
を 使用 し ます 。 

「URL]」 に は ウィ ンド ウ 内 に 表示 する HTML ファ イル の URL を 、「 ウ ィ ン ド ウ 名 」 に は 任 
意 の ウィ ンド ウ 名 を 指定 し ます 。 ウ ィ ン ド ウ 名 を 同じ に する と 、 同 じ ウ ィ ン ド ウ と し 
て 取り 扱わ れ ま す 。 

[属性 ] の 部 分 で は 、 ウ ィ ン ド ウ の ツー ル バ ー や メニ ュー バー な どの 有無 、 ウ ィ ン ド ウ 
の サイ ズ な ど を 指定 し ます 。 各 項目 は 「,」 で 区 切り 、 そ の 項目 が 必要 で あれ ば [=yes」 ま 
た は 「=1」 と 指定 し 、 不要 で あれ ば 「=no] ま た は 「=0」 と 指定 し 、 ウ ィ ン ド ウ の サイ ズ は 
|「= ピクセル] と 指定 し ます 。 指 定 で きる 属性 は 、「toolbar( ツ ー ル バー) ]「location( ロ ケー 
ショ ン バ ー) directories( デ ィ レ クト リバ ー)」「status( ス テー タス バー) 」「menubar( メ 
ニュ ー バ ー)」「scrollbars( ス クロ ー ル バー) Iresizable( リ サイ ズボッ クス ) 」「width=pixels 
(ウィ ンド ウ の 横幅 ) ]「height( ウ ィ ン ド ウ の 縦 幅 ) 」 で 、 各 項目 は 省略 する と 「yes] と し て 
判断 し ます 。 

Macintosh 版 の Netscape Navigator 2.0 な どの 一 部 プラ ウザ で は 、URL が 引け な いも の 
が あり ます 。 こ れ ら の ブラ ウザ も 対象 に 入れ た Web ペー ジ を 作る 場合 は 、 コ ラム 
「Netscape Navigator 2.X で 「window.open()」 を 使用 する 時 の 注意 (次 ペー ジ ) を 参照 し て 
くだ さい 。 

実際 に 試す 場合 に は 、 こ の 他 に も 「winl.nhtml」-「winS.htmll の 5 つの HTML ファ イル を 
用 意 し て くだ さい 。 


| 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm]> 
<head> 
<meta http-equiY="Content-Script-Type" content="Eext/ avVascr1p"> 
<meta htp-equiv="Content-Sty1e-Type" conEent="Eext/css"> 
< 上 it1e></ 上 i1e> 
<SCript type="Eext/]avaScr1pt"> 
ーー 
function wopen1 ( ) { window .open ( "win1 .htm1", "WindowOpen1" , 

"上 OO1Dar=yYe8 , 1OCat 上 1On=yYe8 , dieGC も O エ 1 エ G5=YG8 , 昌和 
8=YG8 , menubar=yYe8 , SCro11bars=yes,re8gizable=ye8s") } 
function wopen2 ( ) { window.open ( "win2 .htm1" , "WindowOpen2", 

上 OO1ba エ =ye8 , 1OCa1on=ye8,d1irecto ェ ieg=no, St 上 atug 抽 
=Ye8,menuba エ =ye8 , SCro11bars=ye8,resizabl1e=yes") } 
function wopen3 ( ) { window.open ("win3 .htm1" , "WindowOpen3『,/ 

"上 OO1Dar=Y@eS , 1O 〇 Ca 上 も On=mO , ミエ GC も O 〇 エエ G8=mO , SaEu8= | 
Ye8,menubar=yYe8, SCro11bars=yes,res1zab1e=yes") } 
function wopen4 ( ) { window.open ("win4 .htm1", "WindowOpen4", 

"上 OO1Da エ =nO , 1O 〇 Ca 上 On=nO, ミエ 6GC 上 O エ エ ら 5=nO, 2 
GS8,mGnu わ a エ =YGS , SCro11bars=ye8,reSsizab1e=yeg") } 
Function wopen5 ( ) { windqow.open ( "win5 .htm1", "WindowOpen5", 

上 OO1Da エ =no, 1OCa 七 1On=nmO, drGC も O エ エ ら GS=mO, 5 も au い 8= 

Ye8 ,menuba エ =YeS , SCFO11Dars=ye8 , reGS1zab1e=yes,w1dth=300,height=450 | 
に 2) 本 
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/EG.0 4 
/E5.5 く / SCr1D セ > 
町 ゴ ) イイ type="text/css"> 
body { background-co1or: #FFFFfFF: } 
ーー テ 
</ sty1e> 
</head> 
<body> 
* 新 し い ウ ィ ン ド ウ を 開く 


< く D> 
















万 re7ox 


Di 
リル 





< く fForm> 
<1input type="button" value=" 全部 あり " onC1ick="wopen1 ( ) "><br> 
<input type="jbutton" value=" ディ レク トリ な し " 0 
"><D エ > 
<input type="button" value=" ディ レク トリ ・ ロ ケー ショ ン な し " 電 
="wopen3 ( ) "><br> 
<input ype="butEon" value=" ディ レク トリ - ロ ケー ショ ン ・ ツ ー ル バー な し 8 
onC1ick="wopen4 ( ) "><b エ > 
<input type="button" value=" サイ ズ 指 定 有 り " onc1ick= "wopen5 ( ) "> 
</ Form> 
く /p> 
</body> 
</htm1> 


Sa ね / 
話 5-ma 
/E4-mas 


Netscape Navigator 2.X で 「window.open()」 を 


使用 する 時 の 注意 

Machintosh 版 と UNIX 版 の Netscape Navigator 6X に は 、window.open0 メ 

ソ ッ ド で URL が 引け な いと いう 問題 が あり ます 。 そ の た め 、 通 常 の スク リプ ト の 書き 
方 で は 、 開 いた ウィ ンド ウ に 何 も 表 示さ れ ま せん 。 

も し も 、 そ れ ら の ブラ ウザ も 対象 と し た ペー ジ で window.open0 を 使用 する 場合 は 、 


function wopen1 ( ) { var WO1: 
WO1=window.open (" ", "WindowOpen6 " , 
"too1bar=yes , 1ocation=yes,directories= ye8,8 芝 
tatus=yes , menubar=yes , SCro] 1bars=yes , res1 zable=yeS" ) : 
WO1 .1ocation .href="URL" } 
っ 


と いっ た よう に すれ ば 大 丈夫 で す 。 

この 時 、UHRL は 「http://] か ら 始ま る フル パス で 指定 し て くだ さい 。 

この スク リプ ト は 、Macintosh 版 と UNIX 版 の Netscape Navigator 2X 以 外 で 
も 正常 に 機能 し ます 。 





setTimeout( 奴 理 , 計 疫 定 ) メソ ッ ド ] 


window.close() [メソ ッ ド ] 
onLoad=" ス クリプト / 悦 数 " [イベ ント ハン ドラ 1 を 
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に JJ お 
に < コ 


After 


トコ 


OperaZ 
Ope/a6 


キネ ウ ィ ン ド ウ を 閉じ る 


は じ め に ウイ ンド ウ を 開き ます 


この ウィ ンド ウ は 約 10 秒 後に 
自動 9 に クロ ー ズ し ます 。 


また 、 下 の [Clsse] ボ タン を 押し て も 
ウィ ンド ウ が クロ ー ズ し ます 。 


LAee 


Sa ね 7 
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\ め ウィ ンド 7 は 、 表 示 中 の Web ペー ジ に より 閉じ られ よう EL てい ます 。 
て の ウィ ンド の を 開 じ ます か ?. 





[close0」 メ ソ ッ ド は 、 ウ ィ ン ド ウ を 閉じ ます 。 

サン プル で は 、 ペ ー ジ が ロー ド さ れ た 時 に <body> 内 の イベ ント ハン ドラ 「onLoad」 が 
「setTimeout)] メ ソ ッ ド を 呼び 出し 、10 秒 後に 「window.close0」 が 発生 し て ウィ ンド ウ 
が 閉じ ます 。 ま た 、 フ ォ ー ム の ボタ ン を 押し て も 、 イ ベン ト ハ ンド ラ 「oncClick」 が 
「window.close()」 を 発生 きせ 、 ウ ィ ン ド ウ が 閉じ ます 。 

setTimeout は ミリ 秒 (1000 分 の 1 秒 ) 単位 で 時 間 を 設定 で きま す が 、 あ まり 小さ い 数 字 
を 設定 し て も 効果 は 出 ませ ん 。 

Netscape Navigator 3.0 か ら は 、 セ キュ リティ 上 の 対策 の た め 、「close)」 メ ソ ッ ド が 発生 
し た 時 に ウィ ンド ウ が 来歴 情報 を 持っ て いれ ば 、 閉 じ る 時 に 確認 の ダイ アロ グ ボ ッ ク 
ス が 開く よう に な り ま し た 。 


| Samplc 間 還 


[win1.htmll 

<body onLoad="setTimeout ("window.c1ose() ',10000) "> 
この ウィ ンド ウ は 約 10 秒 後に <br> 自動 的 に クロ ー ズ し ます 。 

く D> 

また 、 下 の [C1ose] ポ タン を 押し て も <br> ウィ ンド ウ が クロ ー ズ し ます 。 
く /Dp> 

<hr> 


の t 土 共 せ テ Y ヽ エ 人 


<fForm> 

<inpu type="butEon" value=" C1ose " onc1iock="window.c1ose ( ) "> 
</ form> 
</body> 


wae ォ ラ ッ ェ タク ト 3 
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ンス 17 た) | 1 の の レ だ ルレ ん 【< 


Windowr.open() [メソ ッ ド ] 
onUnload=" ス クリ プ ブ ト / 賠 数 " [イベ ント ハン ドラ ] 











Before 
午 CYSamplec\jsWDJnayigator\D4mindowm\D6\imdexhtmi 


イル 細 信 D 表示 お 和 に AO ウー ル CD へ IMZ0 

戻る ・ 紳 の の 実 9 
@ の 回 当る の 叶 殊 この ウイ ンド ウ ( は 約 10 秒 後に 
+ ペ ー ジ を 抜け る 時 に 新しい ウィ ンド ウ を 開く 邊 0IEZ ロ ー ジ ML 信広 


また 来 て ね (^o つ / 


また 、 下 の cksse ボ タン を 押し て も 
ウイ ンド ウ が クロ ー ズ し ます 。 





サン プル で は 、 別 の ペー ジ に 抜け る 時 に 、 イ ベン ト ハ ンド ラ 「onUnload」 が 関数 を 発生 
させ て ウィ イン ドウ を 開き 、 お 礼 の メッ セー ジ を 書い た HTML ファ イル を ロー ド し て い 
ます 5 


<htm1><head> 

< 上 1 上 1e></ ュ 上 1e> 

<SCript type="text/]avascr1p 上 "> 

< 所 

function wopen ( ) { window.open ( "bay .htm1" , "WindowOpen1" , 
2 に て 

,height=250") : 

} 

//--> 

く / SC エ 1D キ > 

て 中 略 一 

</head> 

<body onUn1oad="wopen ( ) "> 

* ペー ジ を 抜け る 時 に 新しい ウィ ンド ウ を 開く 

</body></htm1> 


onUnload を 使用 する 時 の 注意 
イベ ント ハン ドラ 「onUnload」 を 使っ て 複雑 な 処理 を させ る と 、0S や バー ジョ ン 
に 関係 な く 、 ブ ラウ ザ の 動作 が 不安 定 に な る 場合 が あり ます 。 


「onUnload」 を 使用 する 時 は 、 十 分 な テス ト の 上 で 使用 し て くだ さい 。 





開い た ウィ ンド ウ か ら 元 の ウィ ンド ウ を 操作 する 


Opener [プロ バ パティ] 
[プロ パテ ィ ] 
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「opener」 プ ロ パ ティ は 、 元 の ウィ ンド ウ を 参照 し ます 。 

サン プル で は 、 サ ブ プ ウィンドウ 内 の リン ク が クリ ッ ク さ れる と 、「opener.location.href] 
で サ プ ウ ィ ン ド ウ を オー プン し た メイ ン ウ ィ ン ド ウ が 参照 され 、 メ イン ウィ ンド ウ に 
「GoWin()」 内 で 指定 し て いる URL が ロー ド さ れ ま す 。 

また 、 リ ンク が クリ ッ ク さ れ た 時 に メイ ン ウ ィ ン ド ウ が 閉じ ちら れ て いて も 、「closed」 プ 
ロ パ ティ で ウィ ンド ウ が 閉じ られ て いる 状態 を 取得 し ます の で 、「opener.closed」 が 真 
(tmme) と な っ て 新た に ウィ ンド ウ が 開き 、 そ こ に ペー ジ が 読み 込ま れ ま す 。 
JavaScript1.1 で 追加 きれ た メソ ッ ド で す 。 

バー ジョ ン 5.X 以 前 の Macintosh 版 な ど 、 一 部 の TntemetExplorer で は 、「closed」 プ ロ パ 


ティ が うま く 機 能 し な い 場合 が あり ます 。 
wow フジ ェクト 3 
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【 メ イン ウィ ンド ウ 】 

<sCript ype="text/]avaScr1pt 上 "> 
く ! ーー 

function SWwopen ( ) { 


no,direcorieg=no , 5 上 atus=no , menubar=no , SCro]11bars=no , reS1 zab1e= 
no,w1dth=200,height=300") : 
} 
ん / こ =* 
</ SCr1pt> 
中略 て 
く D> 
<form> 
<input type="button" va]1ue=" サ プ メ ニュ ー " onC1ick="SWwopen ( ) "> 
</ form> 
< く /p> 


window . open ( "menu .htm1 " , "SWindow" , "too1Dar=nO , ye | 


【 サ ブウ ィ ン ド ウ (menu.html) 】 
<script type="text/]avasCr1pt"> 
< く ! ーー 
function GoWin(WO) { 
if (opener.c1osed) { 
NewWin=window.open ("", "MWindow" ) : 
NewWin .1ocation .href=WO: 
} 
el1se { opener.1ocation.href=WO } 
} 
(こら 
</ Scr1p キ > 
中略 
<b>* サ プ ウ ィ ン ド ウ </b> 
<p>・<a href="javasortpt : Gowin ( 'page1 .htm1' ) ">1 番目 の ペー ジ </a></p> 
<p>・<a href="javascript :GoWin ( 'page2 .htm1' ) ">2 番目 の ペー ジ </a></p> 
<p>・<a href="]javascript :GoWin ( 'page3 .htm1 ' ) ">3 番目 の ペー ジ </a></p> 


<p>・<a href="javascript :GoWin('index .htm1 ' ) "> 元 の ペー ジ </a></p> 





JavaScrint 





[メソ ッ ド ] 
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アカ イル) 編集 GE) 表示) お 気に入り ⑯ ウール D へ ルプ 
@ 京 の - 較 回 の の 中 宮 bm2p 
* ウ ィ ン ド ウ を 前 に 出す 


良 CYSamplesjs\D1navicator\04windowY0BYimdexrhtml 


アル 鞭 集 6) 表示 ⑰ お 気 に 入 D⑯ ツー ル (D へ 2⑪ 
Os の 回 国人 ぬ の we 宮 smoo 
* ウ ィ ン ド ウ を 前 に 出す 


ョ ヨ wri - Microsott mternet Epl. 司 | 区 結 wrz - Mcrosoft nternet Epl_- 司 ] 区 


*Openl の 絵 *Open2 の 絵 


「focus0」 メ ソ ッ ド は 、 ウ ィ ン ド ウ に フォ ー カ ス を 与え ます 。 

サン プル で は 、 ウ ィ インド ウ 新 し く 開 いた り 、 新 し く 開 いた ウィ ンド ウ が 書き 変わ っ た 
時 に 、 も し その ウィ ンド ウ が 他 の ウィ ンド ウ の 後ろ に 隠れ て いて も 、1 番手 前 に 移動 し 
まま 。 

JavaScriptl.1 で 追加 され た メソ ッ ド で す 。 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm1><head> 
<meta htp-equiv="ConEent-Script-Type" conEent= "tex/ avascr1ipt"> 
<meta http-equiv="ConEent-Sty1e-Type" content="Etext/css"> 
< 上 1 上 1e></ 上 11e> 
<Script ype="Eext / avaSscr1pt"> 
に 
function wopen1 ( ) { 

Var WO1: 

WO1=window . open ( "" , "WindowEFocus1" , Ma 
ectories=no,w1dth=300 ,height=450" ) : 
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WO1 .Eocus ( ) : 

WO1 . document .Write ( "<htm1><tit]e>WF1</1t1e></head>" ) : 
WO1 .document .write ("<body>" ) : 

WO1 .document .write ( "<b>*Open1 の 絵 </b>" ) : 

WO1 .document .write ("<p>") : 












re7ox 


WO1 . document .write ("<1mg name='image1' sro='1mage1 .]pg' 人 
7 


MAGE1 ">" ) : 
WO1 .document .write( "</body>" ) : 
WO1 . document .write( "</htm1>" ) : 
WO1 .document .c1ose( ) : 




























} 
function wopen2 ( ) { 
Yar WO1: 
Opera6 WO1=window.open("" , "WindowFocus1" , "Eoo1bar=no , 1ocation=no , di ェ 
ectories=no,w1dth=300,height=450") : 4 
Sg727/ WO1 .focus() : 


旗 5-7mac 
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WO1 .document .write ( "<htm1>< 上 it]1e>WF2</ 上 1t1e></head>" ) : 
WO1 .document .write ("<body>" ) : 
WO1 .document .write("<b>*Open2 の 絵 </b>" ) : 
WO1 .document .write( "<p>" ) : 
WO1 .document .write ( "<1mg name='1mage2' src='1mage2 .Jpg' a1t=' * 
mage2'>") : 
WO1 .document .write( "</body>" ) 
WO1 .document .write( "</htm1>") : 
WO1 .document .c1ose() : 
} 
が Ap 
</ SCr1p セ > 
</head> 
<body> 
* ウィン ドウ を 前 に 出す 
<D> 
<form> 
<1nput type="DbutEon" value=" Open1!! " onC1ick="wopen1 ( ) "> 
<1nput type="butEon" Value=" Open2!! " onC1ick="wopen2 ( ) "> 
</ form> 
< く /p> 
</body></htm1> 





小さ な ウィ ンド ウ を 開く 時 の 注意 
「window.open()」 の ウィ ンド ウサ イズ 指定 で 、 ウ ィ ン ド ウ の 横幅 が ステ ー タ ス 
バー 内 の ファ イル の 読み 込み 状況 を 示す バー より も 小さ く 指 定 さ れ て いる と 、 
Macintosh PPC 版 Netscape Navigator 3.0 で は シス テム エラ ー を 起こ すこ と 
が あり ます 。 
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ォ ウ ィ ン ドウ を 後ろ に 回 す 
(はじめ に ウイ ンド ウ を 開き ます 


N 


「blur0」 メ ソ ッ ド は 、 ウ ィ ン ド ウ か ら フ ォ ー カ ス を 移動 させ ます 。 

サン プル で は 、 複 数 の ウィ ンド ウ が 開い て いる 時 に ボタ ン が 押さ れる と 「window.blur()」 
が 評価 され 、 ウ ィ ン ド ウ が 後ろ に 回 り ま す 。 

JavaScript1.1 で 追加 され た メソ ッ ド で す 。 

Netscape 6.X で は 、 こ の スク リプ ト は 正常 に 動作 し ませ ん 。 


<fForm> 
<input type="button" value=" 後ろ へ !! " onC1ick="window.b1ur( ) "> 
</ form> 
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JavaScript1 .2 で 追加 され た 


window.open() の 属性 を 使用 する 


windlowr.open( " り 胡 ウィン だ の 名 " 悦 価 ") [メソ ッ ド ] 





Before 


Mozi 


便 ・ き hol | 生 間 間 間 前 ・ ウ ィ ン ドウ の 外周 :400x400( ビ クセ ル ) 
JavaScript1.2 で 追加 され た window.open( の 属性 を 使用 する ーー の 戸村:209 が 20022 補 


ル ) 











「open0」 メ ソ ッ ド に JavaScript1.2 で 追加 され た ウィ ンド ウ 属 性 は 、 次 の 通り で す 。 
「outerWidth] と 「outerHeighil は 、 そ れ ぞ れ ウ ィ ン ド ウ の 外側 の 幅 と 高き を 、 ピ クセ ル 単 
位 で 指定 し ます 。 外側 の サナ イズ な の で 、 ツ ー ル バー や ロケ ーション ボッ クス な ど が あっ 
て も な く て も 、 ウ ィ ン ド ウ の サイ ズ は 変わ り ま せん 。[「left」 と 「top」 は 、 新しく 開く ウィ 
ンド ウ の 左上 角 の 位置 を 、 デ ィ ス プレ イ の 左上 角 の 上 か ら と 左 か ら の ピク セル 単位 で 
指定 し ます 。 

サン プル で は 、 ボ タン を クリ ッ ク し た タイ ミン グ で 、 デ ィ ス プレ イ の 左上 角 か ら 左 へ 
200 ピク セル で 下 へ 200 ピク セル の 位置 に 左上 角 が くる よう に 、 ツ ー ル バー も 含め て 幅 
400 ピク セル で 高 さ 400 ピク セル の ウィ ンド ウ を 開い て いま す 。 

Intemet Explorer で は 、「outerWidth」outerHeishtl は サポ ー ト され て いま せん 。 


ee 


< く !DOCTYPE _ HTML PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1><head> 
<meta http-equ1V="Content-Soript-Type" conEent="text/]avascript"> 
<meta http-equiv="ConEent-Sty1e-Type" content="text/cCss"> 
< 上 1 上 1e></ 上 i 上 1e> 
<SCr1p type="tex 上 / avasCr1pt"> 
に コル ココ 
function WO10_0() { 

Var WOz 

WO=w3indow.open("",/ "Win4" "Eoo1bar=yes, 1ocation=no,d1rectorieg= 
no,outerWidth=400,outerHeight=400,1eFt=200,top=200" ) : 骨 
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WO .document . open ( ) : 
WO .document . write ( "<htm1><tit]e>Win4 .0</ 上 it1e>" ) : 
WO . document . write ("</head>" ) : 
WO . documen .write( "<body>" ) : 
WO .document .write ( "・ ウ ィ ン ド ウ の 外周 : 400x400 (ピク セル ) " ) : 
WO .document . write ( "<br>" ) : 
WO .document . write ("・ デ ィ ス プレ イ の 左上 角 か ら の 表 \ 示 \ 位 置 : 200X200 (ピク セ 
ル ) ") : dj 
WO .document .write( "</body>" ) : 
WO .document .write( "</htm1>" ) : 
WO .document .c1ose( ) : 














} 
が こら と 
< く / SC1Dt> 
<Sty1e ype="text/cs8"> 
で ! ニ ニー 
body { background-co1or: #EFFFfFF: } 
デー 安 
</ sty1e> 
</head> 
<body> 
*JavaScript1 .2 で 追加 され た window . open ( ) の 属性 を 使用 する 
く D> 
<form> 
<1input type="button" value=" Open!! " onC1ick="WO10_0() "> 
</ Form> 
く /p> 
</body></html> 


open() の 属性 を 使用 する 時 の 注意 

JavaScript 1 .2 で 追加 され た open() の 属性 の うち 、「alwaysLowered]」 
「alwaysHaised」「z-lock」 は 、「Signed Script」 内 で 設定 する 必要 が あり ます 。 

また 、「innerWidthl」「innerHeightl」「outerWidthl「outerHeight]」 で 100 ※ 
100 ピク セル 以下 に ウィ ンド ウサ イズ を 指定 する 場合 や 、「screenX」「screenY」 
で ディ スプ レイ の 表示 領域 外 に ウィ ンド ウ 表 示 位置 を 指定 する 時 、「titlebar」 の 指 
定 で タイ トル バー を 表示 し な いよ うに 指定 する 時 に も 、「Signed Script」 内 で 設定 
する 必要 が あり ます 。 


「alwaysLowered」「alwaysHaised」「z-lock」 は 、 そ れ を 表示 する プラ ッ ト ホ ー 
ム に よっ て 動き が 異な る 場合 が あり ます 。 た と えば 「z-lock]」 の 場合 、 Windows 85 
で は 他 の アプ リケーション の ウィ ンド ウ が 開い て いて も 、 そ れ ら より 後ろ に 新しい 
ウィ ンド ウ が 開き ます 。 し か し 、Macintosh の 場合 、 他 の アプ リケーション の ウィ 
ンド ウ が ある と 、 そ の ウィ ンド ウ よ り 前 に 新しい ウィ ンド ウ が 開く 場合 が あり ます 。 














Before 


Mozille Frefox 


ウィ ンド ウ の 外周 ・ 内 周 を 取得 する 







[プロ パテ ィ ] 
[プロ パテ ィ ] 
[プロ パティ] 
[プロ パテ ィ ] 














ウィ ンド ウ の 外周 ・ 内 周 を 取得 する 


ウィ ンド ウ の 高き (内 側 ):200 
ウィ ンド ウ の 幅 ( 内 側 ):460 

ウィ ンド ウ の 高き (外側 ):292 
ウィ ンド ウ の 幅 (外側 ): 
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* ウ ィ ン ドウ の 外周 ・ 内 周 を 取得 する 


ウィ ンド ウ の 高 さ (内 側 ):249 
ウィ ンド ウ の 幅 ( 内 側 ):317 


ウィ ンド ウ の 高き (外側 ):341 
ウィ ンド ウ の 幅 ( 外 側 ):325 





「innerHeight] プ ロ パ ティ と 「innerWidth] プロパ ティ は ウィ ンド ウ 内 の 表示 領域 の 高き と 


ぐり こっ 
document 
document 


の at 寺 落 テマ 上 用 


document . 
-write ("<br>" ) : 
-write(" ウ ィ ン ド ウ の 高 さ (外側 ) :",winaow.outerHetght ) : 
-Write ( "<br>" ) 


document 
documen 
documen 


document . 


が ー ニ ー テ 
< く / SCr1Dt> 


幅 の 値 を 、「outerHeight] プ ロ パ ティ と 「outerWidth」 プロパ ティ は ツー ル バ ー や ステ ー タ 
スパ ー な ども 含め た ウィ ンド ウ の 外側 の 高 さと 幅 の 値 を も 、 そ れ ぞ れ 持 っ て いま す 。 
これ ら の プロ パテ ィ は 、Tmntemet Explorer で は サポ ー ト され て いま せん 。 

JavaScript1.2 で 追加 され た プロ パテ ィ で す 。 


Lomo 


<SCr1pt type="Eext / avaS8or1D"> 


・write(" ウ ィ ン ド ウ の 高 さ (内側) :" ,window.1nnerHeight ) : 
・wr1ite( "<Dr>" ) : 


write( "ウィン ドウ の 幅 (内 側 ) :" ,winaow .3nnerwWidth) : 


write(" ウ ィ ン ド ウ の 幅 (外側 ) :" , window .outerwidth) : 
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ブラ ウザ を 指定 し た 位置 へ 移動 する 


[メソ ッ ド ] 
ディ スプ レイ 左上 か ら 下 方 向 (ピク セル ) 
ディ スプ レイ 左上 か ら 右 方 向 ( ビ ピクセル) 





「moveTo0」 メ ソ ッ ド は 、 ビ ピク セル 単位 で 指定 し た 位置 (xyy) へ 、 ウ ィ ン ド ウ を 移動 させ 
ます 

サン プル で は 、 ウ ィ ン ド ウ が どこ の 位置 に 表示 され て いて も 、 ボ タン を クリ ッ ク す る 
と ディ スプ レイ の 左上 角 か ら 下 へ 100 ピク セル で 右 へ 100 ピク セル の 位置 に 、 ウ ィ ン ド 
ウ の 左上 角 が くる よう に 移動 し ます 。 

JavaScript1.2 で 追加 され た メソ ッ ド で す 。 


ET0 ーーーーーーー 


<!DOCTYPE HTMTL PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm1> 
<head> 
<meta http-equiv="ConEent-Script-Type" conten 上 ="tex 上 /]JavaScr1pt"> 
<meta htp-equiv="ConEent-Sty1e-Type" content="text/css"> 
< 上 it]1e></tiE1e> 
<script type="text/]avaScr1pt"> 
で ニー 
Function MVto( ) { window.moveTo(100,100) } 
ニニ 
</ SCr1p ヒ > 
</head> 
<body> 
* ブ プラ ウザ を 指定 し た 位置 へ 移動 する (画面 の 左上 の 角 を 基準 ) 
<Dp> 
<form> 
<1nput type="button" value=" ムー ブ to!! " onC1ick="MVEo( ) "> 
</ Form> 
く /D> 
</Dbody> 
</htm1l> 
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の 革 藩 具 ゴ テア 用 


Window.moveBy( テ *, 了 ) [メソ ッ ド ] 
ト 水平 方 向 へ の 移動 量 ( ビ ピク セル ) 
Y 垂直 方 向 へ の 移動 量 (ピク セル ) 


アツ PD SV 5RCAOO WO 
OO 当 全 の 加 吉 peoo 


・ ブ ラウ ザ を 提 定 し た 分 量 ず つ 移動 する 
(平方 (と 秋 直 方 人 の 移動 量 を 指定) 





・ プ ラウ ザ を 提起 し た 分 時 ずつ 移動 する 
(方 向 と 秋 直 方 向 の 抄 動 重 を 所) 





「moveByO0」 メ ソ ッ ド は 、 ピ クセ ル 単 位 で ウィ ンド ウ を 移動 させ ます 。 

サン プル で は 、 ボ タン を クリ ッ ク す る ご と に 、 ウ ィ ン ド ウ が 右 と 下 へ 100 ピク セル ず 
つ 移 動 し ます 。 

JavaScript1.2 で 追加 され た メソ ッ ド で す 。 
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ーー ャ ーーーーーーーーーー 


<!DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona] / /EN"> 
<htm1> 

<head> 

<meta http-equ1v="Content-Script-Type" content=" て text/ avaSsCr1p 上 "> 
<meta http-equ1v="ConEent-Sty1e-Type" content="Etext/css"> 

< 上 1 上]1e></ 上 1 上 ]e> 


<sCrip type="Eext/]avascr1p 上 "> 

全 和 = ニ 

Function MVby ( ) { window .moveBy(100,100) } 
//ーー テ 

</ Script> 


<sty1e type="text/oss"> 

に ドー ビー 

body { background-co1or: #EFEFFF: } 
ーー テ 


</ sty1e> 


</head> 
<body> 
* ょ プラ ウザ を 指定 し た 分 量 ず つ 移動 する <br> 
(水平 方 向 と 垂直 方 向 の 移動 量 を 指定 ) 

<Dp> 
<form> 

<input type="button" value=" ムー ブ by!! " onC1ick="MVby ( ) "> 
</ Form> 
く /p> 
</body> 
</htm1> 
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ee 
を アル 4 ルル と た ん イコ の rd リ し と を 
windowr.resizeTo( テ , 了 ) [メソ ッ ド ] 
ト に ウィ ンド ウ 左 上 角 か ら 垂 直方 向 (ピク セル ) 
Y ウィ ンド ウ 左 上 角 か ら 水 平方 向 (ビク セル ) 











Before After 


良 CYSamplesYjs\01nayieator\04window\14Yindex.html 委 cySamplesYjsY0Inayieatory. 証 | 回 了 


ファ イル 編集 ) 表示 ⑰ お 気 に 入 ⑧ ツー ル Q①D へ J プ ⑩ アイ ル ) 編集 ⑦ 表示 お 気 に 入 し 4 
@ ま の 回 国人 の の 宮 5R2p @ の 回 回 の 


ォ ブ ラウ ザ の 大 き さ を 指定 し て リサ イズ する ピラ ン ザ の 大 きき を 潮 直 て リサ イ 
(ウィ ンド ウ の サイ ズ を ビク セル 単位 で 指定 ) ズ す 


ウイン ドウ の サイ ズ を ビ クセ ル 単 位 で 
所 


「resizeTo0」 メ ソ ッ ド は 、 ピ クセ ル 単 位 で 指定 し た サイ ズ に ウィ ンド ウ を リサ イズ し ます 。 
サン プル で は 、 ボ タン を クリ ッ ク す る と 、 ウ ィ ン ド ウ の 左上 角 を 基準 に 、 縦 横 300 ピ 
クセ ル に リサ イズ し ます 。 

な お 、 設 定 し た サイ ズ は 、Internet Explorerr で は ウィ ンド ウ の 外周 の サイ ズ 、Netscape 
Navigator で は ウィ イン ドウ 内 の 表示 領域 に た る た め 、Intemet Explorer と Netscape 
Navigator で は 、 ス クリ プ ト の 実行 結果 が 異な り ま す 。 

JavaScript1.2 で 追加 され た メソ ッ ド で す 。 


0 


<Soript type="Eext/]avascr1pt"> 
人 中 と ー 
function RSo( ) { window.resizeTo(300,300) )} 
// ニ ニテ 
< く / SCr1D ヒ > 
中略 一 
<body> 
* ブ ラウ ザ の 大 き さ を 指定 し て リサ イズ する <br> 
(ウィ ンド ウ の サイ ズ を ピク セル 単位 で 指定 ) 
く D> 
< く fForm> 
<1nput type="button" value=" リサ イズ to!! " onC1ick="RSto( ) "> 

< く / form> 
く /p> 
</body> 
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ブラ ウザ を 指定 し た 分 量 ず つ リ サイ ズ す る 


window.resizeBy( テ , 了 ) [メソ ッ ド ] 
ト 底辺 の リサ イズ 量 (ビク セル ) 
右辺 の リサ イズ 量 ( ピ クセ ル ) 













Op- の 回 回 の の w moo 
ォ * ブ ラウ ザ を 指定 し た 分 量 す つ リ サイ ズ す る ( 底 辺 の 角 が 基準 〉 
EETUSSMSAUDNTZUUALULUTUUUAAEUUUSSUUUISRIIZUULN TI X 
アイ ル (P) 右 業 (D 表示 お 気に入り (⑯ ウー- ル CD へ ルフ ⑪ 

の 回 回 の の we 支 ioo 


* ブ ラウ ザ を 指定 し た 分 量 す つ リ サイ ズ す る ( 克 辺 の 角 が 基準 


ekto| 










「resizeBy0]」 メ ソ ッ ド は 、 ウ ィ ン ド ウ の サイ ズ を ピク セル 単位 で 変更 し ます 。 

サン プル で は 、 ウ ィ ン ド ウ の 底辺 と 右辺 が 、 ボ タン を クリ ッ ク す る ご と に それ ぞ れ 50 
ピク セル ずつ 広がり ます 。 

JavaScript1.2 で 追加 きれ た メソ ッ ド で す 。 


<script type="text/]avascr1pt "> 
ルー ニニ 
Function RSby ( ) { window.resizeBy(50,50) } 
//--> 
</ SCr1p セ > 
て 中 上 略 ン 
<Dp> 
<form> 
<input type="button" value=" リサ イズ by!! " onC1ick="RSby ( ) "> 
</ form> 
く /p> 
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ウィ ンド ウ を スク ロー ル す る 


Windowr.scroll( テ , 了 ) [メソ ッ ド ] 
ト d ウィ ンド ワウ 左上 角 か ら 垂 直方 向 (ビク セル ) 
ウィ ンド ワウ 左上 角 か ら 水 平方 向 (ビク セル ) 










アイ ル (P 編集 (D 表示 お 気 に 和 AD ツー- ル D へ ルプ ⑬ 
@ 呈 の 回 還る の 時 宮 sRc2p 
ウィ ンド ウ を スク ロー ル す る 
まあ な ん て いう か 、 


スク ロー ル 中 は 何 も で き な く な る 
の が 残念 で すね 。 









まあ な 
スク ロー ル 中 は 何 も で き な く な る 
の が 残念 で すね 。 

k 






アイ ル (P 皿 集 (5) 表示 お 気 に 和 D⑯ ツー- ル ①D へ AZ 


@ や の 回 回 人 の me 支 Pm 





「scrollx,y)」 メ ソ ッ ド は 、x 軸 と y 軸 を ピク セル 単位 で 指定 し 、 指 定 し た 位置 まで プラ 
ウザ を スク ロー ル さ せま す 。 

サン プル で は 、for 文 で y 軸 に 数 値 を 代入 し 続け 、 プ ラウ ザ を 縦 方 向 に スク ロー ル さ せ 
て いま す 。 

for 文 で 式 を ルー プ さ せ て いる だ け な の で 、 実行 速度 は マシ ン パ ワー に 左右 され 、 実 行 
中 は 他 の 動作 を 受け 付け な く な り ま す 。 

JavaScript1.1 で 追加 され た メソ ッ ド で す が 、Netscape Navigator 2.0 で も 動作 し ます 。 
この スク リプ ト は 、Mac OS 9 版 の mtemet Explorer 5.X で は 動作 し ます が 、Mac OS X 
版 で は 動作 し ませ ん 。 





ETT 間 呈 ーーーーーーーーーーーーーーー 一 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm1> 
<head> 
<meta http-egquiv="Content-Script-Type" Content=" て text /avaScript"> 
<meta http-equiv="ConEent-Style-Type" conten="Eex 上 /CSS"> 
< 上 1 上 ]e></ 上 1 上 1e> 
<script ype="ext/]avaScr1p"> 
に 1 
function SCLL() { 
for(var i=0: 1<150:1++) { window.scro11(0,) } 
for(1=149: 1>=0:1--) { window.scro11(0, ふ ) } 


Ope/a7 


} 


Ope/g 
ニニ ッ と 】 
</ SCr1pt> 
<style type="text/CsS"> 話 5-7yax 


<!-ー 

body { background-co1or: #EEEFffF: } 
デー ウゥ み 

</ sty1e> 

</head> 

<body> 

* ォ ウィ ンド ウ を スク ロー ル す る 


< く D> 


圧 4-mac 


<form> 
<input type="button" value=" スク ロー ル 開 始 !! " onC1ick="SCLL ( ) "> 
</ Eorm> 
</p> 
まあ な ん て いう か 、<br> 
スク ロー ル 中 は 何 も で き な く な る <br> 
の が 残念 で すね 。 
<b エ ><b エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ >< わ エ ><D エ ><D エ ><D エ ><D エ > 
Spaprwpepp rb poem rb beerbr br rp br br | 
<br><b エ ><b エ ><b エ ><D エ ><D エ ><D エ ><Dr> く <D エ ><D エ ><D エ ><D エ ><D エ ><D エ > 
一 すず す 。。 。。 
</body> 
</htm1l> 


「scroll()」 メ ソ ッ ド を 使用 する 時 の 注意 
Windows 版 の Netscape Navigator で は 、「scroll(x.y)」 で スク ロー ル 位 置 を 指 


定 し て いて も 、 そ の 範囲 に ドキ ュ メ ント が な けれ ば ドキ ュ メ ント が ある 範囲 し か ス 
クロ ー ル し ませ ん 。 

また 、 フ レー ム や 「window.open()」 の 指定 で スク ロー ル バ ー が 出 な いよ うに 指定 
し て いて も スク ロー ル し な い の で 、 注 意 し て くだ さい 。 





き ほ 蘭 語 暫 友 
に SEMEJ に 
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トコ 
hl 
に < 


トコ 
ジ 加 回 還 に 
に ゴト トコ 


Opeya/ 
Ope/ra6 


の * ト 革 落 計 ゴ テテ V ュ 人 用 


フレ ー ム を スク ロー ル す る 












[メソ ッ ド ] 
F フレ ー ム 左上 角 か ら 垂 直方 向 ( ビ クセ ル ) 
フレ ー ム 左上 角 か ら 水 平方 向 (ピクセル) 
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OO 回 加 人 の の w 支 Pmoo 
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ォ * フ レー ム を スク ロー ル す る 


サン プル で は 、 フ レー ム 内 の ウィ ンド ウ を 、「scroll(x.y)」 メ ソ ッ ド の x 軸 の 値 に 
「setTimeout0」 メ ソ ッ ド で 一 定時 間 ご と に i の 値 を 1 ずつ 加え な が ら 代 入 す る こと に よっ 
て 、 横 に スク ロー ル さ せ て いま す 。 

一 定時 間 に 処 理 を 繰り 返し て いる の で 、 実行 中 は 他 の 動作 を 受け 付け な く な る よう な 
こと は あり ませ ん 。 

スク ロー ル さ せる 文字 は 、<nobr> を 使っ て 改行 され な いよ うに し て いま す 。 
JavaScript1.1 で 追加 され た メソ ッ ド で す が 、Netscape Navigator 2.0 で も 動作 し ます 。 


間 了 EE 


【 フ レー ムウ ィ ン ド ウ 】 

<!DOCTYPE HTMTL PUBLTC "-//W3C//DTD HTML 4.01 Frameset//EN" > 
<htm1l> 

<head> 


58 waow ォ フタ ェクト 


< 上 1 上 1e></ 上 it]1e> 
</head> 
<frameset rows="150,*"> 
<fFrame Src="F1 .htm1" name="F1"> 
<frame Src="F2 .htm1" name="F2"> 
</ frameset> 
<nofFrame8> 
フレ ー ム 機能 を 使用 し て いま す 。 フ レー ム 対 応 の プラ ウザ で 試し て くだ さい (^_^) 。 
</noframes> 
</htm1l> 


【f1.htmll 

<!DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta htp-equiV="Content-Soript-Type" conten="text/ avascr1pt"> 
<meta http-equiv="Content-Sty1e-Type" content="tex 上 /Css"> 

<i 上 1e></ 上 ュ it]e> 


<SCrip type="text/ avaSCr1pt"> 
に 
var i = 0: 
var MOZT = 3200: 
var ST = 50: 
function SCLL2() { 
if ( i < MOZT) { 1 = +2: 
window.gcro11 (i, 0 ) : 
} 
setTimeout ("SCLL2 ( ) ", ST) : 


} 
ん ーー デ 
</ SCr1p キ > 


<sty]e type="text/Css"> 

リー 

body { background-co]1or: #FFFFFF: } 
ーー テ > 

</ sty1e> 


</head> 

<body onLoad= "SCLL2 ( ) "> 
<nobr> 

<font size=6> フレ ー ム 内 の 文字 を スク ロ 
ー ル し ます . . .nobr の 指定 と settimeout が ポイ ント で す 。Efor 文 を 使う と スク ロー ル 中 は 何 
も で き な く な っ て し まい ます 。 Windows で は スク ロー ル バ ー を "no" に し て いる と うま くい か な 
い 時 が あり ます 。</ Eont> 
< く /nobr> 

</body> 

</htm1> 
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ブラ ウザ を 指定 し た 位置 まで スク ロー ル す る 


window.scrollTo( テ ,) [メソ ッ ド ] 
克 ウィ ンド ウ 左 上 角 か ら 垂 直方 向 (ピク セル ) 
マ ウィ ンド ウ 左 上 角 か ら 水 平方 向 (ピク セル ) 





Betore 
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し 220- ル oi 





「scrollTo0] メ ソ ッ ド は 、 JavaScript1.1 の 「scroll)」 メ ソ ッ ド を 拡張 し た も の で 、 ピ クセ 
ル 単 位 で 指定 し た 位置 へ 、 ウ ィ ン ド ウ の 表示 領域 を 移動 きせ ます 。 

「scrol(0」 メ ソ ッ ド も 以前 まで と 互換 を 保つ た め に 使用 可能 に な っ て いま す 。 

サン プル で は 、[ ス クロ ー ル tol!] ボ タン を クリ ッ ク す る と 、 ウ ィ ン ド ウ の 表示 領域 の 左 
上 角 か ら 、 上 へ 100 ピク セル で 左 へ 100 ピク セル の 位置 に 移動 し 、[ 戻 す !!] ボ タン を 押 
す と 下 の 位 置 へ 戻り ます 。 次 項 の 「scrollBy()」 メ ソ ッ ド と 違い 、1 度 表示 領域 が 移動 す 
る と 、 そ れ 以 降 は ボタ ン を クリ ッ ク し て も 表示 位置 は 変わ り ま せん 。 

Macintosh 版 の Netscape Navigator 4.X 以 外 の プラ ウザ の 場合 は 、 表 示 領 域 は スク ロー 
ル バ ー が 出 て いる 範囲 で し か 移動 し な い の で 、 サ ンプ ル で は 1000 X 1000 ピク セル の 
空 領域 を 設定 する こと に よっ て 、 ス クロ ー ル バー が 出る よう に し て いま す 。 
JavaScript1.2 で 追加 され た メソ ッ ド で す 。 





ee 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta htDp-equiv="ConEent-Script-Type" conEen=" tex 上 / avascCr1p 上 "> 
<meta http-equiv="Content-Sty]1e-Type" content="text/css"> 

< 上 1E]1e></ 上 11e> 


<sCript type="text/]avascr1pt"> 

く ! ーー 

Function SREo1 ( ) { window.scro11To(100,100) } 
//ー ニ = タ : 

</ scr1p キ > 


<sty1e type="text/css"> 

ぐ ト = ニニ 

body { background-co]or: #FFFfFFfF: } 
ーー テ > 


</ sty1e> 


</head> 
<body> 
<d1iv 1d="STY1" style="position:abso1ute: 1eEt:200px: top:200px: 
width:1000px: height:1000px: background: Tan"> 4 
* ブラ ウザ を 指定 し た 位置 まで スク ロー ル す る <br> 
(ウイ ンド ウ の 左上 の 角 を 基準 に ビク セル で 指定 ) 

< く fForm> 

<1nput type="button" value=" スク ロー ル to!! " onC1ick="SRto1 ( ) "> 
</ form> 
< く /d1V> 
</body> 
</htm1> 
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ブラ ウザ の 表示 領域 を 指定 し た 分 量 ず つ ス クロ ー ル する 





window.scrollBy( テ , 了 ) [メソ ッ ド ] 
3 水平 方 向 (ビク セル ) 
Y 垂直 方 向 (ビク セル ) 


Before 
妥 C YSamplesYjsWD1navieat mWinderht 本 避 YSamplesYjsY0 jmindowmY19Yindex html 


カイル) 編集 GE) 表示 お 気に入り ⑳ ウツ - ル D 2 カイル 妨 集 ら お 気に入り ⑯ ウー- ル ① へ ル 2⑪⑩ 


の の 回 国人 人 の 困 支 5xoo GO 回 回 人 @ の ws 吉 5mo 





「scrollBy0」 メ ソ ッ ド は 、 ウ ィ ン ド ウ の 表示 領域 を ピク セル 単位 で 移動 し ます 。 

サン プル で は 、 ボ タン を クリ ッ ク す る ご と に 、 表 示 領 域 が 右 と 下 へ 100 ピク セル ずつ 
移動 し ます 。 

Macintosh 版 の Netscape Navigator 4.X 以 外 の プラ ウザ の 場合 、 表 示 領 域 は スク ロー ル 
バー が 出 て いる 範囲 で し か 移動 し な い の で 、 サ ンプ ル で は 1000 X 1000 ピク セル の 空 
領域 を 左端 と 上 か ら 200 ビク セル の 位置 に 配置 し て スク ロー ル バ ー が 出る よう に し 、 そ 
こ に ボタ ン を 設置 し て いま す 。 な お 、Macintosh 版 の Netscape Navigator は スク ロー ル 
バー が 出 て いな い 場 合 で も スク ロー ル 可 能 で す 。 
JavaScript1.2 で 追加 され た メソ ッ ド で す 。 


|Sompo 琴 生還 


<SCrip ype="tex 上 /]avascript"> 
SN ニニ 
Function SRby ( ) { window.scro11By(-100,-100) } 
//--> 
< く / Cr1D キ > 

中略 
<diY 1d="STY1" style="position:absol1ute: 1eEt:200px: top:200px: 
width:1000px: height:1000px: background: Tan"> 4 
ょ プラ ウザ を 指定 し た 分 量 ず つ ス クロ ー ル する <br> 

(表示 され て いる 領域 の 水平 方 向 と 垂直 方 向 に 対し 指定 ) 
<fForm> 

<1nput type="button" value=" スク ロー ル by!! " onC1ick="SRby ( ) "> 

</ form> 
く /d1v> 


02 we オラ ェクト 


に 
に lu 
1 ら 


ステ ー タ ス 行 に メッ セー ジ を 表示 する 


windowr.status [プロ バテ ィ ] 
onMVrouseOver=" ス クリ ブ ト / 尉 数 " [イベ ント ハン ドラ ヲ ] 
Beforc 
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* ス テー タス 行 に メッ セー ジ を 表示 する 

この 文字 の 上 に マウ スカ ー ソ ル を 持っ て くる と 
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@ ゃ ・ の 回 還る の 実 smo 
* ス テー タス 行 に メッ セー ジ を 表示 する 
RE 










同 回 共 









| 軸 バー ジ が 表示 され まし た 











[ 計 ] 2 テ ー52 生 (に ッ セ ー ジ が 中 ます ) 、 旨 マ ヤー ター 


サン プル で は 、 リ ンク 上 に マウ スポ イン タ が 乗っ た 時 に イベ ント ハン ドラ 「onMouse 
Over」 内 の スク リプ ト が 評価 され 、「window.statusl」 に よっ て ステ ー タ ス 行 に 文字 を 表示 
させ て いま す 。 

リン ク の 説明 を 表示 する な どの 利用 方 法 が あり ます 。 

この スク リプ ト は 、Netscape 6.2 で は 動作 し ませ ん が 、 そ れ 以 前 の Netscape 6.X で は 正 
常に 動き ます 。 


nm 


<a href="#" onMouseOver=" PR 
return truG"> 
この 文字 の 上 に マウ スカ ー ソ ル を 持っ て くる と 


</a> 
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ステ ー タ ス 行 に 文字 を 流す 


window.status [プロ パテ ィ ] 
setTimeout( 女 理 , 歴 其 設 定 ) [メソ ッ ド ] 
clearTimeout() [メソ ッ ド ] 
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アイ ル (上 編集) 表示 お 気に入り ⑯ ウー ル D へ ルフ 
の 由 還 人 @ の 衣 5moo 


ォ * ス テー タス 行 に 文字 を 流す 
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サン プル で は 、 ま ず ペ ー ジ が 読み 込ま れ た 時 に 、 イ ベン ト ハ ンド ラ 「onLoad」 が 関数 
「Mess0O」 を 発生 し ます 。 

次 に 「MessO{…!」 内 で は 、TC の 値 に 1 を 加え 、「window.statuns」 で ステ ー タ ス 行 に 文字 
列 を 書き 出し た 後 、sring オプ ジェ クト の 「substring0」 メ ソ ッ ド で 文字 列 を 2 字 ず らし 、 
「setTimeout0]」 メ ソ ッ ド で 再び 関数 [MessO)」 を 呼び 出し て いま す 。 そ し て 、 こ の 処理 を 
「(TC<1000)」 が 真 に な る まで 繰り 返す こと に よっ て 、 ス テー タス 行 に 文字 が 流れ る よう 
な 効果 を 出し て いま す 。 

「MessO」 の 処理 が 終っ た 時 は 、 ス テー タス 行 に スペ ー ス を 表示 する こと に よっ て 、 ス 
テー タス 行 の 文字 を クリ ア し て いま す 。 

文字 列 の 最後 と 先頭 が くっ つい た り 、 い き な り 文字 が 現われ た り し な いよ うに 、 文 字 
列 の 始め に も スペ ー ス を 入れ て いま す 。 

スク ロー ル さ れ て いる 長 さ の 調整 は 、「(TC < 1000)」 内 の 数 値 を 変更 する こと に よっ て 
行い ます 。 

スク ロー ル の 速度 は 、「setTimeout("Mess()".300)」 内 の 数 値 を 変え 0 る こと に よっ て ミリ 
秒 単位 で 調整 し ます 。 

この スク リプ ト は 、Mac OS 9.X 上 の Netscape 6.X な ど 、 一 部 の 環境 で は 動作 し な い 場 合 
が あり ます 。 
































EE 拉 LF つ ut1tTtt っ ーー 
<SCr1p type="text/]avaSCr1pt"> 


ce 


に 
hu 


ED 王 0 3 リア ズル 
var Sm1 =『\ 思 reox。 
OSR2 ツ 上 し に 3 
ar Sm3 m 
NM/ 思 


LA6X 。 


Var SmesS = 8m1+Sm2+Sm3+Sm4: K 
var timeTD=setmimeout("",1) : LA2.06 
function Mess() { 
1E (TC < 1000) { // こ この 数 値 を 変え る こと に よっ て スク ロー ル す る 時 間 が 変わ り ま す 
TC++ 
Window . statug = SmeSS: 
Smess = Smess.substring(2,Smess .1ength) + 970 【 ず 7 と /7 


var Sm4 = "ここ に メッ セー ジ を 入れ ます . .  . ET 


の / 
Opeya6 


ing(0,2): 
c1earTimeout (1meTD) : 
timeTD = setmimeout ("Mess()",300): 
} 
else ( window.statug = " " ] 
} 
//-- テ > 
</ scr1pt> 


て 中 略 一 
</head> 

<body onLoad="Mess ( ) "> 
* ス テー タス 行 に 文字 を 流す 
</body> 








「setTimeout()」 メ ソ ッ ド の 処理 を 繰り 返し た 時 の 注意 

Netscape Navigator 2.0 で 「setTimeout()」 メ ソ ッ ド の 処理 を 繰り 返し た 
JawaSocript を 実行 し た 時 、 し ば らく する と 「 メ モリ ー エ ラー」 が 発生 し 、 ブ ラウ ザ 
の 動作 が 不安 定 に な っ て し まい ます 。 

本 書 で は 、 こ の エラ ー を 回 避 す る た め 、 一 定時 間 で 処理 を 終了 させ る と いう 対策 
を と っ て いま す 。 

その 他 に も 、 エ ラー 回 避 の た め に 「clearTimeout(0」 メ ソ ッ ド を 使っ て 、1 回 1 回 
「setTimeout0」 の 処理 を 明示 的 に 終了 させ る な どの 対策 が あり ます 。 
この エラ ー は 、Netscape Navigator 3.0 以 降 で は 発生 し ませ ん 。 
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ペー ジ が ロー ド さ れ た 時 に ステ ー タ ス 行 に 揚 拶 を 表示 する 


wimdlowr.status [プロ パテ ィ ] 
setTimeout( 女 理大 記 設 定 ) [メソ ッ ド ] 












当 C:wSamplesYjsy01navicator04windowy22*mdexhtml - Micr- 司 | 還 | 区 


カイル 編集 ⑰ 表示 お 気 に AD⑧ 9- ル D AMZ⑪ 
Os ・ の 回 の の es 宮 5mO9 


* ォ ペー ジ が ロー ド さ れ た 時 に ステ ー タ ス 行 に 接 拶 を 表示 する 










サン プル で は 、 ス テー タス 行 に 表示 する 文字 列 の 配列 を 作り 、 ペ ー ジ が 読み 込ま れ た 
時 に 、 配 列 の 要素 を 順番 に ステ ー タ ス 行 に 書き 出し て いま す 。 

表示 の 処理 が 終っ た 時 に は 、 ス テー タス 行 に スペ ー ス を 表示 する こと に よっ て 、 ス テー 
タス 行 の 文字 を クリ ア し て いま す 。 

表示 の タイ ミン グ は 、「setTimeout("EVENT3()". 500)」 内 の 数 値 を 変え 0 る こと に よっ て 
ミリ 秒 単 位 で 調整 し ます 。 


間 


< く !DOCTYPE HTML PUBLTC "-//W3C//DTD HTML. 4.01 Transitiona] / / EN"> 
<htm] > 

<head> 

<meta htp-equ1iv="ConEtent-Scr1pt-Type" content="ext/]avascript"> 
<meta htp-equiv="ConEen-Sty1e-Type" content="text/cCss"> 

< 上 1t 上 1e></ 上 1 上 ]e> 

< く SCr1pt type="Eext/ avaScr1p 上 "> 

ーー 

ads PH 107 

var ] = 0 

Function MakeArray(n) { 
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this.1ength =nz: 
GE (Wa 中 己 ) 0 も 之 三 (m 下 上 ) も 
this[i] = 0: 




















return this : 
} 
msqg = new MakeArray(16) : 
msg[0] = リリ ラジ 
msdg[1] = リ " 
msg[2] = " We1come 
msg[3] = " We1come 
msg[4] = " 
msg[5] = " To 
msg[6] = " To 
msg[7] = " 
msg[8] = " My Home Page 
msg[9] = " My Home Page 
msg[10] = " 
msgd[11] = " 
msgd[12] = " 
msgd[13] = " *Welcome To My Home Page* 
msg[14] = " *Welcome To My Home Page* 
msg[15] = " *Welcome To My Home Page* 


function EVENT3() { 
SE ((mGI 飲 6 t 
RG 年 王 # 
if (] <= msg.1ength) { 
window.status = msd[]] : 
ck 
if (] == msg.1ength) { 
放り 
} 
setmimeout ("EVENT3()", 500): 
} 
) else 【 
window.gtatus = " ! 


} 

た かー ニン 

</ Scr1p セ > 

</head> 

<body onLoad= "EVENT3 ( ) "> 

* ペー ジ が ロー ド さ れ た 時 に ステ ー タ ス 行 に 挨拶 を 表示 する 
</body> 

</htm1> 
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JavaScrint 


ウィ ンド ウ 内 の 文字 を 検索 する 。 
windowr.find( 文 字 列 /[ な re | 7a75e] ) [メソ ッ ド ] 








アイ ル 編 案 6) 表示 GO 移動 (G) プッ 2 マー ク G) ツー ル D ヘル 


を ゆら G@ の omo 


ォ ウ ィ ン ドウ 内 の 文字 を 検索 する 





^JavaScript と は 、 Netscape 社 が Web ペ ー ジ の 処理 能 
力 を 高め る た め に 開発 し た "LiveScript“ を 元 に 、 
Netscape 社 と Su が 共同 で 開発 し た スク リブ ト 言 語 で 、 
Netscape Navigator 2.0 以 降 の ブラ ウザ や Internet 
Fxplorer 3.0 以 降 の ブラ ウザ な ど で 対 応 さ れ て いま す 。 


以 の フト EN 








After 


LOLUMIZUU 


Netscape 社 Sn が 共同 で 開発 し た ジア 8 言 語 で 、 
Netscape Navigator 2.0 以 降 の ザ *oInternet 
Explorer 3.0 以 降 の ブラ ウザ な ど で 対 応 さ れ て いま す 。 
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「fnd0」 メ ソ ッ ド は 、 ウ ィ ン ド ウ 内 の 文字 列 を 検索 し 、 指 定 さ れ た 文字 列 が 発見 され た 
時 に 、 真 (true) ま た は 偽 (false) を 返す よう に 設定 する こと が で きま す 。 

サン プル で は 、 フ ォ ー ム に 入力 され た 文字 列 が ウィ ンド ウ 上 に 含ま れ て いる か どう か 
を 検索 し 、 結 果 を 警告 用 の ダイ アロ グ ボ ックス に 表示 し て いま す 。 

JavaScript1.2 で 追加 され た メソ ッ ド で す 。 


EE 所 _ 


< く !DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML. 4.01 Transitiona1 / /EN"> 
<htm1l> 

<head> 

<meta http-equ1 マ ="ConEent-Script-Type" content="Etext/avascript"> 
<meta htEp-equ1v="Content-Sty1e-Type" content="text/css"> 

< 上 it1e></ 上 1 上 1]e> 





<sCript type="ext/]avaSscr1p 上 "> 
に 
function FTN(i) { 

if ( window.Eind( 1,true) ) ( alert ("文字 列 "+ ュ + 9 
され まし た ") } こ 
e1se { alert ("文字 列 " + 1 + "は 発見 され ませ ん で し た ") } ire7ox 


} 
ん / ニ ー シ リアル 
</ script> 


<style type="text/css"> 

に 

jbody ( background-co]1or: #EEFFfFF: } 
ーー テ > 

</ sty1e> 


</head> 
<body> 
* ウィンドウ 内 の 文字 を 検索 する 
<hr> 
<b1ockquote> 
<b> "JavaScript"</b> と は 、 Netscape 社 が Web ペー ジ の 処理 能力 を 高め る た め に 開発 し た 
<b> "LiveScript"</b> を 元 に 、 Netscape 社 と Sun が 共同 で 開発 し た <b> スク リブ ト 言 語 
</b> で 、 Netscape Navigator 2.0 以 降 の プラ ウザ や Tnternet Explorer 3.0 以 降 
の ブラ ウザ な ど て で 対応 され て いま す 。 
</b1ockquote> 
<h エ > 
<form> 
<1input type="text" name="fFin1" value="" size=30> 
<input type="button" name= "Ein2" value=" 検索 !! " 6090 
(fin1 .value) "> 
</ form> 
</body> 
</htm1> 
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JavaScript 


ブラ ウザ を 制御 する ボタ ン を 作る 


opener.back() を [戻る ] ボ タン [メソ ッ ド ] 
opener.forward() 欠 [ 進 む ] ボ タン [メソ ッ ド ] 


opener.home() 欠 [ ホ ー ム ] ボ タン [メソ ッ ド ] 
opener.stop( ) 符 [中 止 ]」 ボ タン [メソ ッ ド ] 








アイ ル (E 編集 表示 移動 ⑪ プッ クマ -2⑧ ウー ル ⑪ AM プ ⑪ 人 
年 - ゅ -@96@ の om 


+ ォ ブラ ウザ を 制御 する ボタ ン を 作る 








WIN4.0_SAMPLE - Mozilla Firefox 


[BSeJLfewea 」 








アイ ル (6 電信) 表示 移動 ⑪ プッ Zv- が 8) ツー ル D AM 境 


を と - ゅ -@G6 の 6ow 


Goosle ウェ ブ イメ ー ジ ニュ ー ス neww グル ー ブ 
1 


] 黄 
> 





「backO] メ ソ ッ ド は 、 プ ラウ ザ の [戻る (Back)] ボ タン で 参照 され る の と 同じ ひと つ 前 の 
ウィ ンド ウ の URL を 返し ます 。 同様 に 、「forward)」 メ ソ ッ ド は ブラ ウザ の [進む 
(Forward)] ボ タン で 参照 され る の と 同じ ひと つ 先 の ウィ ンド ウ の URL を 、「home)」 メ 
ソ ッ ド は プラ ウザ の [ホー ム (Home)] ボ タン で 参照 きれ る の と 同じ URL を 、 そ れ ぞ れ 
返し ます 。「stop0」 メ ソ ッ ド は 、 プ ラウ ザ の [中 止 (Stop)] ボ タン を 押し た 時 と 同じ 状態 
を 返し ます 。 

サン プル で は 、 プ ラウ ザ の メニ ュー バー の ボタ ン と 同じ 働き を 持っ た ボタ ン が ある サ 
プ ブウ ィ ン ド ウ を 開き 、 そ こ か ら 元 の ウィ ンド ウ を 操作 で きる よう に し て いま す 。 
JavaScriptl.2 で 追加 され た メソ ッ ド で す 。 





っ つっ 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm1> 

<head> 

<meta http-equ1v="Conten 上 -Script-Type" content="tex 上 /]avascr1pt 上 "> 
<meta htp-equ1iv="Conten 上 -Sty1e-Type" conten 上 ="text/css"> 

< 上 1 上 ]e></ 上 1 上 ]1e> 

<SCrip type="Eext/]avaSscr1Dt"> 

さこ = 

function NewWin( ) { 


var NW: 
の 36 に S 和 信人 
tories=no, W1dth=400 , Height=150" ) : 


.document . open ( ) : 
2 

@>" ) 

・document .write( "</head>" ) : 

.document .write ("<body>" ) : 

.document . write ("<Form>" ) : 

.document .write ( "<input type='button' value=' Back!! ! on 

C1ick= 'opener.back( ) ">") : 2 

NW.document .write( "<1nput type='butEton' value=' Forward! ! 用 
4 
4 


独 当 包 略 当 史 


onC1ick='opener .Eorward( ) ">" ) : 
NW .document .write( "<input type='butEton' value=' Home!! ! on 
C1ick='opener.home() '>") : 
NW.document .write( "<input type='Dbutton' value=' Stop!! ! on 
C1iock= 'opener.stop( ) '>") : 
NW.document .write( "</Eorm>" ) : 
NW.document .write ( "</body>" ) : 
NW .document .write ("</htm1>" ) : 
NW.document .c1ose() : 
} 
ms 
</ SCr1Dt> 
<style type="text/Css"> 
ベーー 
body { background-col1or: #FFFFfFfF: } 
ーー 
</ sty]e> 
</head> 
<body> 
* ブラ ウザ を 制御 する ボタ ン を 作る 
< く D> 
<Form> 
<input type="button" value=" Open!! " onC1ick="NewWin ( ) "> 
</ form> 
</p> 
</body> 
</htm1> 
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各種 バー を 制御 する 


window.1ocationbar.visible = rre/fa7se7//7/07 [ブロ バテ ィ ] 
Window.menubar.visible = /grue/7a7se7//7/07 [プロ パテ ィ ] 
windowr.personalber.visible = / 女 ge/fa7se7//】/07 [プロ バテ ィ ] 
window.scrollbars.visible = /rne/7a7se7//7/07 [プロパティ] 
window.statusbar.visible = /grne/fa7se7//7/07 [プロ バテ ィ ] 
window.toolbar.visible = /grne/fa7se7//】 / 7 [プロ バテ ィ ] 






JavaScript1.2 対応 の Netscape Navigator 4.0 で は 、 メ ニュ ー バ ー や ステ ー タ スバ ー な ど 
の 各種 バー を プロ パテ ィ と し て 持っ て いま す 。 

各種 バー は 、「window.locationbar.visible=true」 や 「window.locationbar.visible=1] と いう 
よう に 、「.visible=[true | 1 ]] と 指定 され て いる 時 は 表示 状態 に な り ま す 。[「window. 
locationbar.visible=false」 や | window.locationbar.visible=0]」 と いう よう に 、[「.visible=[false 
|0]」 と 指定 され て いる 時 は 非 表 示 状 態 に は なり ます 。 こ れ ら の プロ パテ ィ の 値 は 、 後 か ら 
変更 可能 で す 。 

これ ら の プロ パテ ィ は 、「Signed Script」 内 で 設定 する 必要 が あり ます 。 

JavaScript1.2 で 追加 され た プロ パテ ィ で す 。 


JavaScript と ポッ プア ッ プ ブロ ッ ク 

Windows XP Service Pack つ で は 、 セ キュ リティ 関連 の 多く の アッ プ デ ー ト が 
あり まし た 。 そ の 中 で も 、Internet Explorer 6 Service Pack ら に 新た に 搭載 さ 
れ た ポッ プア ッ プ ブロ ッ ク の 機能 は 、JavaScript の を 使う 上 で 注意 が 必要 な アッ 
eeiDSCNO5 

ポッ プア ッ プ ブロ ッ ク と は 、 ポ ッ プ アッ プ ウ ィ ン ド ウ と 呼ば れる 、 ブ ラウ ジン グ 
中 に 自動 的 に 開か れる 新しい ウィ ンド ウ を 、 ユ ー ザ の 許可 な し に は 開か な いよ うに 
する 機能 で す 。Windows XP Service Pack ら を あて た Internet Explorer 6 で 
は 、 標 準 で て の ポッ プア ッ プ ブロ ッ ク が 機能 する 状態 に な っ て いま す 。 

Internet Explorer 6 の 場合 、、 ポ ッ プ アッ プ ブロ ッ ク に 引っ 掛か る と 、 ま ず は 
ペー ジ 上 部 の 情報 バー や ステ ー タ スバ ー に ポッ プア ッ プ ブロ ッ ク が 機能 し た こと を 
表示 し ます 。 そ し て 、 そ の 部 分 を クリ ッ ク す る と 、 ポ ッ プ アッ プ ウ ィ ン ド ウ の 表示 
を 許可 する か どう か を 確認 する メニ ュー が 表 わ れ る の で 、 そ こ で ポッ プア ッ プ を 開 
く か どう か を 選択 する の で す 。 また 、[ ツ ー ル ] メニ ュー か ら 、 ポ ッ プ アッ プ ブロ ッ 
ク を 無効 に し た り 、 特 定 の サイ ト の ポッ プア ッ プ ウィ ンド ウ は 許可 する よう に 設定 
する こと も で きる よう に な っ て いま す 。 

この ポッ プア ッ プ ブロ ッ ク の 機能 よ 、Netscape 7 や Opera、Firefox な どの 
ブラ ウザ で は 、 以 前 か ら 搭 載 さ れ て いま し た 。 こ れ ら の ブラ ウザ は 、 設定 の 項目 に 
ポッ プア ッ プ ブロ ッ ク を 有効 に ける か どう か の 設定 が あり ます 。 ま た 、Internet 
Explorer 6 と 同じ よう に 、 特 定 の ウィ ンド ウ の ポッ プア ッ プ を 許可 する よう に 設定 
する こと も で きま す 。 








JavaScript と セキ ュ リ ティ 

JavaScript は 、 セ キュ リティ を 確保 する た め 、 本 来 は ブラ ウザ 以外 の ユー ザー の 
ロー カル 資源 に 勝手 に アク セス する こと を 許さ れ て いま せん 。 実際 、JavaScript が 
直接 アク セス を 許さ れ て いる 唯一 の ロー カル 資源 は 、 cookie ファ イル の み で す 。 こ 
の よう な 、「 影 響 を 与え る 範囲 を ブラ ウザ 内 に 限定 し 、 そ れ を 越え る 範囲 で の 動作 を 
許さ な い 」 と いう 思想 は 、JAVA の 思想 を 受け 継い で いる 部 分 で も あり ます 。 

この た め JavaScript で は 、 ウ イル ス を 埋め 込む よう な 動作 や 、 問 題 を 起こ す プ 
ログ ラム を 実行 する 、 ブ ラウ ザ 上 以外 の PC 上 の デー タ が 漏れ る 、 と いっ た セキ ュ 
リティ 上 の 問題 は 、 バ グ は 別 と し て も 、 基 本 的 に 起こ と り に くい 作り に な っ て いる と 
いえ ます 。 


し か し 、 こ れ が Internet Explorer と Internet Explorer が 搭載 し て いる JScript 
と な る と 、 話 は 少し 違っ て きま す 。 

Windows 版 の Internet Explorer は 、0S 自身 や 0S が 持っ て いる 機能 と 深い 部 
分 で 結び 付い て いま す 。 こ れ は 、 本 来 は DS と ブラ ウザ の 結び 付き を 強め る こと に 
よっ て 、 ユ ー ザ ー の 利便 性 を 高め る こと が 目的 で あっ た は ず で す 。 と ころ が 、 そ の 


た め に 、JScript と ActiveX な どの 機能 が 連係 し あう こと に よっ て 、 問 題 を 起こ す 
よう な プロ グラ ム を 埋め 込ん だ り 、 実 行 し た り 、PC 上 の デー タ を 漏らす よう ね 動作 
を し て し まう 場合 が あり ます 。 つ まり 、 こ の 場合 の 利便 性 は 、 現 時 点 で は 、 セ キュ 
リティ 上 の ぜ い 弱 性 に つなが っ て し まっ て いる よう な の で す 。 

も ちろ ん 、 そ れ な り の 対策 は と られ て は いま す が 、 こ の よう な 08S と アプ リ ケ ー 
ショ ン が 深く 統合 され た 環境 で は 、 問 題 を 完全 に 取り 除く の は 難し い の で は な いか 
と 思わ れ ま す 。 ま た 悲し いこ と に 、 実際 に Internet Explorer の この よう な 特徴 を 
利用 し た ウイ ルス も 、 多 数 生ま れ て き て いま す 。 

また 、JScript に ある 「 ユ ー ザ ー の 利便 性 を 高め る 」 と いう 目的 で 独自 に 拡張 され 
た 機能 の 中 に は 、 ク リッ プ ボ ー ド の 内 容 を 貼り 付け る 「clipboardData] と いっ た も 
の が あり ます 。 こ れ は 、 悪 意 を 持っ て 使わ れ た 場合 、 デ ー タ 漏えい の 観点 か ら 見 れ 
ば 、 か な り 希 険 な 機能 で す 。 


この こと か ら も 、 も し も Windows と Internet Explorer の 環境 で イン ター ネッ 
ト を 利用 し て いる の で あれ ば 、[ ツ ー ル ] メニ ュー に ある [イン ター ネッ ト オ プ ショ 
ン ] の [セキ ュ リ ティ ] の 設定 内 容 を 良く 理解 し 、 自 分 に あっ た セキ ュ リ ティ レベ ル 
の 設定 を 行う 必要 が ある と いえ る で し ょ う 。 
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入力 され た URL を 別 フ レー ム に 表示 する 


parent. フ レー ム 名 . プ ロバ パテ ィ 


Before After 
委 C-\Samples\js\01nayiatorW05fra 


アイ ル P) 編集 表 お 気に入り (⑯ ツー ル ①D へ ルプ ⑬ 


G*・ の 還る の 野宮 5m9 


E また JJUESISIULPMR れ AEHETTAIUETT は 41] 


イル ⑥ 編集 表示 ⑰ お気 に 入 D⑳ ツール CD へ J プ ⑬ 閑 
@ ま ・ の 固 較 の の we 実 5RO9 


* 入 力 され た URL を 別 フ レー ム に 表示 する 








http//www shuwasystem.co_p/| 





JavaScript を 記述 し て いる フレ ー ム 以外 の フレ ー ム に JavaScript の 値 を 引き 渡す 時 は 、 
「parent. 値 を 渡す フレ ー ム 名 . 値 ] と 指定 し ます 。 

サン プル で は 、 フ ォ ー ム 内 に 入力 され た URL の 値 を 「parent.f1.locationm] と し て 、 フ レー 
ムネ ー ム [fl 」 の 「 ロ ケー ショ ン の 値 ] に 引き 渡し て いま す 。 

一 見 や や こし そう で す が 、 慣 れれ ば 非常 に 簡単 で 利用 価値 の 高い 用 法 な の で 、 ぜ ひ 
1 度 チ ャ レン ジ し て みて くだ さい 。 

な お 、「location]」 プ ロ パ ティ の 使い 方 に 関し て は 、「location オプ ジェ クト 」 の 「 入 力 さ れ 
た URL へ 進む フォ ー ム を 作る ](P.409) を 参照 し て くだ さい 。 

また 、 フ レー ム を 抜け て ペー ジ を 表示 する に は 、「parent.top.location.href=URL」 と 「top」 
プロ パテ ィ を 指定 し ます 。 具 体 的 な 使い 方 は 、「Form オプ ジェ クト 」 の 「 ラ ジオ ボタ ン 
を リン ク に 使う 」(P.424) を 参考 に し て くだ さい 。 

実際 に 試す 場合 に は 、 こ の 他 に も 「fl.html」 を 用 意 し て くだ さい 。 
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【 フ レー ムウ ィ ン ド ウ 】 
<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Frameset//EN" > 
<htm1> 
<head> 
< 上 1 上 1e></ 上 1 上 1e> 
</head> 
<frameset rows="*,100"> 
<fFrame sro="fF1 .htm1" name="F1"> 
<fErame SrC="F2 .htm1" name="F2"> 
</ frameset> 
<noframes> 
フレ ー ム 機能 を 使用 し て いま す 。 フレ ー ム 対応 の プラ ウザ で 試し て くだ さい (^_^) 。 
</nofFrames> 
</htm1> 































【f2.html 

<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona] / /EN"> 
<htm1> 

<head> 

<meta htp-equ1v="ConEenE-Socript-Type" conEent="text/aVvascr1pt"> 
<meta http-equ1iv="ConEtent-Style-Type" content="Eext/css"> 

< 上 it 上 ]e></ 上 1 上 ]e> 


<SCrip type="tex/]avasCr1pt"> 
3ー ビ 
function LC2 (go) { 
if (go.ur12.value != "") ( ea 
ue } Ope/a7 
else ( alert( "URL を 入力 し て くだ さい " ) } Ope/a6 
} 
テー 
</ script> 


Sa ね / 
左 5-m, 
だ E4-a 
<sty1e type="text/css"> 

1 こ ピ 

body { background-col1or: #FFFEFF: } 
ーー テ 

</ style> 


</head> 

<body> 

<fEorm name="URL2"> 

<input type="text" name="ur12" value="http://" size=40 > 
<input type="button" name= "CF2" value=" Go!! " 
onC]ick="LC2 (this .Eorm) "> 

</ Form> 

</body> 

</htm1> 





ます 
JavaScript で 操作 で きる フレ ー ム の 範囲 
JavaScript で は 、 セ キュ リティ ー 上 の 配慮 か ら 、 親 フレ ー ム と 子 フレ ー ム 、 あ 


る い は 複数 の フレ ー ム に 表示 し た HTML ファ イル が 別 ド メイ ン の 場合 は 、 子 フレ ー 
ム 間 で 値 を 取 得 し た り 、 操 作 す る こと は で きま せん 。 







OperaZ 
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複数 の フレ ー ム を 同時 に 変更 する - ボタ ン を 使う ・ 


Before 


記 C-\Samples\js\01na 
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サン プル で は 、 ボ タン が クリ ッ ク さ れ た 時 に 、 ふ た つの URL の 値 を 持っ た 関数 を 発生 
し 、 そ の 値 を 1 度 に 関数 の 処理 へ 引き 渡す こと に より 、 複 数 の フレ ー ム に 新しい ペー 
ジ を 読み 込ん で いま す 。 こ の よう に 、「parent. フ レー ム 名 .location.href=URL] の 処理 を 
複数 設定 する だ け で 、1 回 の 処理 で 複数 の フォ ー ム を 変更 する こと が 可能 で す 。 

実際 に 試す 場合 に は 、 こ の 他 に も 「pagel.html」-「page3.htmll の 3 つの HTML ファ イル 
を 用 意 し て くだ さい 。 





| Samnlc 還 還 還 


【 フ レー ムウ ィ ン ド ウ 】 
<!DOCTYPE HTMTL, PUBLTC "-//W3C//DTD HTML, 4.01 Frameset//EN' > 
<htm1><head> 
< 上 1 上 ]e></ 上 1 上 1e> 
</head> 
<fFrameset cols="120,* リ "> 

<Frame src="fF1 .htm1" name="F1"> 

<fErameset rows="50 も ,50 も "> 

<frame SrcC="F2 .htm1" name="F2"> 

<fFrame sro="page1 .htm] " name="EF3"> 

</ Frameset> 
</ FrameSe ヒ > 
<noframeSs> 
フレ ー ム 機能 を 使用 し て いま す 。 フ レー ム 対 応 の プラ ウザ で 試し て くだ さい (^_^) 。 
</noframe8> 
</htm1> 
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【f1.html】 
<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1><head> 
<meta http-equ1v="ConEen-Script-Type" Content="text / avVaSscr1pt"> 
<meta htp-equiv="ConEen-Style-Type" conEent="text/cCsS"> 
< 上 1 上 1e></ 上 1 上 1e> ./re7ox 
<script type="text/ avasCr1Dt"> Mozja 
< く !ーー 
function CH1 (P1,P2) { 
parent . 下 2 .1ocaion . hreF=P1 : 
parent . 3 .1ocation .hre モ =B2 : 
} 
/// ニ = と 
</ SCr1pt> 
<style type="text/css"> 
1 ニン Sa7 ね 7/ 
body { background-co1or: #EFFFfFE: } 2.09 
語 /E4-m 
</ sty1e> 
</head> 
<body> 
< く D> 
<fForm> 
<1nput type="button" value=" change!! " 0 
'page3 .htm1 ' ) "> 
</ Form> 
く /p> 
<P> 
<fForm> 
<input type="button" value=" 元 に 戻す " RS 
1.htm1') "> 
</ form> 
< く /p> 
</body></htm1> 


【f2.htmll 
<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1><head> 
<meta htEtp-equ1iv="Content-Style-Type" content="text/css"> 
< 上 1t 上 1e></ 上 1t]e> 

中略 一 
</head> 
<body> 
* 複数 の フレ ー ム を 同時 に 変更 する - ボタ ン を 使う - 
</body></htm1> 
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複数 の フレ ー ム を 同時 に 変更 する - リン ク を 使う - 


Windowr.open( び 刀 フレーム 名 ) 
href="gJavaScript: 閑 数 " 






Before 1( コ ad 
or\O5fr 委 CYSampleswjs\01n 
表示 お気に入り) 


国 @ の wa 到 omoo 








サン プル の 「window.open(URL. フ レー ム 名 )」 の 部 分 は 、frame オプ ジェ クト と いう より 
は 、window オプ ジェ クト 的 な 用 法 で す 。 

サン プル で は 、 リ ンク が クリ ッ ク さ れ た 時 に ふた つの URL の 値 を 持っ た 関数 を 発生 し 
て 、 そ の 値 を 1 度 に 関数 の 処理 へ 引き 渡す こと に より 、 そ れ ぞ れ の フレ ー ム に 新しい 
ウィ ンド ウ を 開い て いま す 。 こ の 時 に 、 本 来 ウ ィ ン ド ウ 名 に 当る 部 分 は 、 フ レー ム 名 
と し て 取り 扱わ れ ま す 。 

実際 に 試す 場合 に は 、 こ の 他 に も [f2.hmlllpagel.html」-「page3.htmll の 4 つの HTML 
ファ イル を 用 意 し て くだ さい 。 

な お 、 フ レー ム を 抜け て ペー ジ を 表示 する に は 、「window.open(URL." top')] と 、 ウ ィ 
ンド ウ 名 に 「_top」 を 指定 し ます 。 具体 的 な 使い 方 は 、「Form オプ ジェ クト |] の 「 ラ ジオ ボ 
タン を リン ク に 使う 」(P.424) を 参考 に し て くだ さい 。 

また 、「hre="JavaScript: 関 数 "| の 使い 方 は 、「Link・Anchor オプ ジェ クト 」 の 「 リ ンク を 
ボタ ン の よう に 使う - 1 -|(P.420) を 参考 に し て くだ さい 。 


|Somnlr 王 還 


【 フ レー ムウ ィ ン ド ウ 】 
<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Frameset//EN" > 
<htm1> 
<head> 
< 上 1 上 1e></ 上 1 上 1e> 
中略 -- 
</head> 
<Frameset cols="120,*"> 
<frame sro="FfF1 .htm1" name="F1"> 
<frameset rows="50 も ,50 も "> 
<Erame Sro="F2 .htm1" name="F2"> 
< く Frame Src="page1 .htm] " name="F3"> 
</ FrameSse ヒ > 
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</ FrameSe キ > 

<noframes> 

フレ ー ム 機能 を 使用 し て いま す 。 フレ ー ム 対応 の ブラ ウザ で 試し て くだ さい (^_^) 。 
</noframes> 

</htm1> 


【f1.html】 
<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1><head> 
<meta http-equ1v="ConEent-Script-Type" content="text/]avaScript"> 
<meta http-equiv="Content-Style-Type" conEtent="Etext/css"> 
< 上 it1e></it1e> 
<SCrip ype="Eex/]avasCr1p 上 "> 
さけ ビン 
Function CH1 (P1 ,P2){ 
window.open(P1,"E2" ) : 
window.open (P2,"E3" ) : 

} 
//--> 
</ SCr1pt> 

中略 一 
</head> 
<body> 
< く D> 
<a href="Java8oript :CH1 ( "page2 .htm1' , "page3 .htm1! ) ">Change! ! </a> 
く /p> 
< く D> 
<a href="Java8oript :CH1 ('E2.htm1' , "page1 .htm1' ) "> 元 に 戻す </a> 
く /D> 
</body></htm1> 


フレ ー ム 内 に > ジ を ロー ド す る 時 の 注意 
frame オ ブ ジ ェ クト を 使用 し て 「parent. フ レー ム 名 .location.hre 仁 URL」 と ン 軸 
フレ ー ム に 新しい ペー ジ を ロー ド し よう と し た 場合 、Macintosh 版 の Netscape 
Navigator 9.0 な どの 一 部 ブラ ウザ で は 、 ふた つ 目 以降 の URL が 引け ず に エラ ー E 
に な っ て し まう こと が あり ます 。 央 

その よう な 場合 は 、 上 の サン プル を 参照 し て くだ さい 。 
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開い た ウィ ンド ウ か ら 元 の ウィ ンド ウ の フレ ー ム を 操作 する 


Windowr.open( ) 
target= フレ ー ム 名 






ROD 


ViamlewWWUlnavientorWUblra PT 
カイル 課 集 5) 表示 ⑦ お 気に入り ⑳⑩ ① へ 2 


GE の 回 遇 の Ga 








サン プル で は 、 ウ ィ ン ド ウ 名 と フレ ー ム 名 が 、 同 じ よ うに 取り 扱わ れる こと を 利用 し 
て いま す 。 

フレ ー ム 内 か ら 新 し い ウ ィ ン ド ウ を 開き 、 そ の ウィ ンド ウ か ら 「<a href="URL" target= フ 
レー ム 名 >] と いう よう に 、 タ ー ゲ ッ ト ウ ィ ン ド ウ の 設定 に フレ ー ム 名 を 指定 する こと 
に より 、 指 定 し た フレ ー ム に ペー ジ を ロー ド し て いま す 。 

実際 に 試す 場合 に は 、 こ の 他 に も 「page2.html」 と 「page3.htmll の ふた つの HTML ファ イ 
ル を 用 意 し て くだ さい 。 

「window オブジェクト] の 「 開 いた ウィ ンド ウ か ら 元 の ウィ ンド ウ を 操作 する 」(P.343) 
は Netscape Navigator 3.0 以降 で し か 使え を ませ ん が 、 こ の サン プル は Netscape Navigator 
2.0 で も 正常 に 作動 し ます 。 
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間 間 間 ee 


【 フ レー ムウ ィ ン ド ウ 】 
<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Frameset//EN" > 
<htm1> 
<head> 
< ヒ 上 1 上] e></ 上 1 上 1e> 
</head> 
<fFrameset rows="*,50"> 
<frame Src="F1 .htm1" name="F1 リ > 
<frame Sro="F2 .htm1" name="F2"> 
</ frameSe ヒ > 
<noframeS> 
フレ ー ム 機能 を 使用 し て いま す 。 フレ ー ム 対応 の プラ ウザ で 試し て くだ さい (^_^) 。 
</nofFrameS> 
</htm1> 


【f1.htm】 
<!DOCTYPE HTMTL PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1> 
<head> 
<meta http-equtv="ConEent-Script-Type" content="text / avasCr1pt"> 
<meta http-equiv="Content-Sty1e-Type" content=" て text/cs8"> 
<E1iE1e></ 上 ュ 1 上 1e> 
<script type="Eext/]aVvaScr1pt"> 
<!ーー 
function wopen ( ) { 
Var WO1: 
WO1=window.open ( "menu1 .htm1 " , "MenuWindow" , 

"too1bar=no , 1ocation=mo , directorieS=noO , 5 上 a 
tug=no , menubar=no , SCro] 1 bars=no , res1zab1e=no , w1dEth=200 , height= 
300"): 

} 
/ が ニュ 
</ SCr1pt> 
//--> 
</ SCr1D セ > 
て 中 
</head> 
<body> 
* 開い た ウィ ンド ウ か ら 元 の ウィ ンド ウ の フレ ー ム を 操作 する 
<D> 
<fForm name="MENU1"> 


<input type="button" name= "nenu1" value=" サブ メニ ュー " onC1ick="wopen ( ) "> 


</ Form> 
< く /p> 

</body> 
</htm1> 
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【f2.html】 
< く !DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona] / /EN"> 
<htm1><head> 
<meta htEtp-equiv マ ="Content-Sty1e-Type" content="text/css"> 
で キ 1 上 1e></ 上 1 上 1e> 
て 中 略 一 
</head> 
<body> 
ご KK ミ デー レー 六 、 = 
</body></htm1> 





【menu1.html】 
< く !DOCTYPE HTML PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm1><head> 
<meta hEEp-equiy="Content-Sty1e-Type" content="text/css"> 
< ヒ i 上 1e></ 上 1 上 1e> 
中略 
</ head> 
<body> 
<b>* サブ プ メ ニュ ー</b> 
<D> 
<p>・<a href="page1 .htm1" target=F1>1 番目 の ペー ジ </a> 
<p>・<a href="page2 .htm1" target=F1>2 番目 の ペー ジ </a> 
<p>・<a href="page3 .htm1" target=F1>3 番目 の ペー ジ </a> 
<p>・<a href="f1 .htm1" target=E1> 元 の ペー ジ </a><p> 
< く /p> 
</body></htm1> 


【page1.html】 
<!DOCTYPE HTMTL PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona] / /EN"> 
<htm1><head> 
<meta htp-equiy="Content-Sty1e-Type" content="text/css"> 
< ヒ i 上 1e></ 上 1 上 1e> 
中 略 
</head> 
<DodyY> 
<htzx 1 ペー ジ 目 。 。。</1> 
</body></htm1> 





[メソ ッ ド ] 


プイ ル E) 編集 CE 表示 | お 気に入り (⑧ ツー ル ① ん ルプ ⑬ 


GR・O 回 回 の の we pmoo 


* 文 字 を 書き 出す 


例 ) こ うし て も 
例 2) こ うし て も 
例 3) こ うし て も 
結果 は 同じ 。 


JavaScript で プラ ウザ に 文字 を 書き 出す 時 に は 、「write0」 メ ソ ッ ド を 使用 し ます 。 そ の 
時 に 、 JavaScript 内 に HTML の タグ を 書け ば 、 普 通 に HTML で 記述 し た 時 と 同じ よう 
に タグ が 評価 され 、 書 き 出さ せ た 文 字 は 普通 の テキ スト 文 と 同様 に 前 後に 挟ま れ た タ 
グ に 従っ て 表示 され ます 。 ま た 、JavaScript 自体 も 、HTML の タグ と 同じ よう に 文字 を 
修飾 する コマ ンド を 多数 持っ て いま す 。 JavaScript が 持っ て いる 文字 を 修飾 する メソ ッ 
ド に 関し て は 、sring オプ ジェ クト (P.545 ) を 参照 し て くだ さい 。 

Netscape Navigator 4.X で は 、 ウ ィ ン ド ウサ イズ を 変更 し た 時 に 、「write)」 メ ソ ッ ド で 
書き 出さ れ た 文字 が 消え て し まい ます 。 


ーー 


<!DOCTYPE HTMTL, PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1l> 

<head> 

<meta htp-equiv="Content-Script-Type" 

conten ヒ ="Eex/aVaScCr1DE 上 "> 

<meta hEEp-equiv="ConEent-Sty1e-Type" conEent="text/oss"> 

< 上 1 上 1e></ 上 1 上 1e> 


<Sty1e tyDpe="tex 上 /Cs8"> 

<!ーー 

body { background-Co1or: #EFFFFF: } 
ニー ニテ 

</ sty1e> 


</head> 
<body> 
* 文字 を 書き 出す 
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<p> 


<SCrip tyDpe= "tex 上 / JaVaSCr1p 上 "> 

Si ニニ 

document write ("<D> 例 1) こう し て も </b>『 ) : 
2/ ピ ニテ 

< く / SCr1p ヒ > 

<b エ > 

<D> 

<SC エ 1p 上 tyDe= "上 tex 上 /aVaSCr1D 上 "> 

に ドコ 

document .write(" 例 2) こう し て も ") : 

ん: が ここ 

く / SCr1Dp> 

</b> 

<b エ > 

<SC エ ip type="tex 上 /avaSCr1pt"> 

で ニニ 

Gocument .write(" 例 3) こう し て も " .bo1d( ) ) : 
//ーー テ > 

く / SCF1p キ > 


の / 
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< く D エ > 
結果 は 同じ 。 
く /p> 
</body> 
</htm1> 


まき] 

書き 出さ れ た 文字 が 文字 化け する 時 は 

「document.write0」 で 文字 を 書き 出し た り 、「alert()]」 メソ ッ ド な どの ダイ アロ 
グ ボ ックス に 文字 を 表示 し た 時 に 、「 表 示 ] と いっ た 漢字 が 「 働 う ] と 文字 化け し て し 
まう 場合 が あり ます 。 こ れ は 、 日 本 語 の 文字 コー ド と 英語 の 文字 コー ド と の 間 に 問 
題 が あめ る た めで す 。 

も し 、 文 字 化け が 発生 し た 場合 上 の サン プル の よう に 「 表 \ 示 ] と 、 文 字 化け し 
て いる 文字 の 後ろ に 「\」 (また は バッ クス ラッ シュ ) を 入れ ます 。 

この 他 に も 、「 可 能 \] や 「 予 \ 定 ] や 「 申 \ し 訳 ] な どの わり と 使い そう な 漢字 も 
同様 の 問題 が あり 、 そ の 結果 エラ ー を 起こ す 場合 が あり ます 。 
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改行 付き で 文字 を 書き 出す 


document.writeln( 文字 列 ) [メソ ッ ド ] 


当 C-YSamples\js\D1nayigator\06document\02\mdex.ht.。 全 | 上 | 区 | 


ファ イル () 編集 (E) 表示 ) お 気に入り (@) ツー ル ①D ヘル プ ⑬ [イコ 
@ 京 ・@ 回 国人 の の 時 宮 5X29 
* 改 行 付 き で 文字 を 書き 出す 


この Script は この よう に <prez</pre> タ グ 
内 で 文章 を 改行 する 時 に 使い ます 。 





「writeln0」 メ ソ ッ ド は 、 コ マン ド の 終了 位置 に 改行 コー ド を 付け て 文字 を 書き 出し ます 。 
<pre> 内 で の み で 意味 を 持ち ます 。 


<Dre> 
<SCript type=" て ex 上 /]aVvascr1ipt"> 

< ま ドニ 

document .write1n ("この 8oript は この よう に gs1t:preggt:g1t: /preggt: タグ ") : 
document .write1n ("内 で 文章 を 改行 する 時 に 使い ます 。") : 

// --> 

</ script> 

< く /Dp エ re@> 


>) <pre> : 「 ス タイ ル と レイ アウ ト 」 の 「 空 白 や 改行 を その まま 表示 させ る ](P.46) 


長い 文章 を 書き 出し た い 時 は 
「document.write()」 な ど を 使っ て 長い 文章 を 書き 出し た 時 に 、 ブ ラウ ザ の バー 
ジョ ン に よっ て は 、 エ ラー が 発生 する 時 が あり ます 。 


これ は 、Netscape Navigator が 1 行 中 に 1 バイ ト 文 字 で 555 字 まで 、 ら バイ 
ト 文字 だ と その 半分 の 文字 し か 扱え な か っ た こと か らく る 問題 で す 。 

この 問題 を 回 避 す る た め に 、「document.write( 文 字 列 AT" 文 字 列 B)] と いっ た 
具合 に 、JavaScript で 書き 出す 文章 は 短く 分 ける こと を お 勧め し ます 。 
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[プロ バテ ィ ] 
[プロ パテ ィ ] 
[プロ パテ ィ ] 





ドキ ュ ント NNE 取 信 す る 







計 http//mmw shuwasy pp - Titel- Mierowoft 


アア イル) 退 集 CE) 表示 | お 気に入り ⑳ ツー ル ①D ヘル プ ⑬ 
Gm・ の 還 引 人 の の me Pmoo 


* ド キュ メン ト の 情報 を 取得 する 





タイ トル :Tiel 
URL: k 
http//wwwwshuwasystem cojp/SHOKAIdic/test/Samples/j ぉ /01navigator/06document/03/indexhtml 
リン ク 元 の URL: 
http//wwwshuwasystem co jp/SHOKAUdic/test/Samples/js/01navigator/06document/03/linkhtml 






document オプ ジェ クト が 記述 し て ある HTML ファ イル の 情報 を 取得 する プロ パテ ィ で す 。 
「de」 プ ロ パ ティ は HTML の <tidle> 部 分 の 値 を 、「URL」 プ ロ パ ティ は その HTML ファイ 
ル 自 身 の URL の 値 を 、「refererl プ ロ パ ティ は HTML フ ァイル が リン ク さ れ て いた URL 
の 値 を 、 そ れ ぞ れ 持 っ て いま す 。 

Irefemer] プ ロ パ ティ は 、Imtemet Explorer 3.X で は 、 リ ンク 元 の URL で は な く 自 分 自身 の 
URL を 表示 し て し まい ます 。 こ の 問題 は 、Imtemet Explorer 4.X や Macintosh 版 の mtemet 
Explorer3.01 で は 解消 され て いま す 。 し か し 、mmtemetExplorer 5.0 で も リン ク 元 URL を 取 
得 で き な い 場合 が あり ます の で 、 注 意 し て くだ さい 。 

実際 に 試す 場合 に は 、「tinkhtmll と 一 緒 に サー バー に アッ プロ ー ド し て くだ さい 。 
これ ら の プロ パテ ィ は 読み 出し 専用 で す 。 


< く 8Cr1pt type=" て ex 上 /avascr1ipt"> 

人 

document .write ("タイ トル :" , ocument .tit1e) : 
document .write ( "<br>" ) : 

document .write( "URL :" , document . URL ) : 

document .write ( "<br>" ) : 

document .write(" リ ンク 元 の URL : " , document .referrer) : 
/ メ ニー テ 

< く / SCr1Dp セ > 


06 em オラ ジェ クト 


ファ イル の 更新 日 時 を 取得 する 


[プロ パテ ィ ] 


衝 C:\Samples\js\D1nayjeator\D6docment\04\jndex.htm 


プア イル 編集 (ED 表示 お 気 に 和 AD ツー ル CD へ J プ ⑪ 
② 放 ・⑨ | 較 人 の の 丈 吉 不 み 9 
* フ ァイル の 更新 日 時 を 取得 する 


Last update:02/24/2005 12.0000 


[lastModified] プ ロ パ ティ は 、document オプ ジェ クト が 記述 し て ある HTML ファ イル 
の 、 最 終 更新 日 時 を 持っ て いま す 。 

この 日 時 は 、HTML ファ イル が 置か れ て いる HTTP サー バー の タイ ム ス タ ン プ が 参照 
され ます 。HTTP サー バー は 国際 標準 時 で 運用 され て いる こと が 多く 、 フ ァイル の 最 
終 更 新 日 時 が 日 本 時 間 と ずれ る 場合 が あり ます 。 

この プロ パテ ィ は 読み 出し 専用 で す 。 


EETTTE2 史 uu 


<8Cript type= "tex 上 /aVaSC エ 1p ヒ "> 

く ! ニー 

document .write( "Last update :",document .1agtModified ) : 
/ が ーー と 

</ Script> 


Macintosh で HTTP サー バー を 運用 する 時 の 注意 
[lastModified] プロ パテ ィ は 、 ど の バー ジョ ン の Netscape Navigator も 
Macintosh か ら は 正確 な ファ イル 更新 日 を 取得 する こと が で きま せん 。Macintosh 


を 使っ て HTTP サ ー バ ー を 運用 し て いる 場合 は 、 注 意 が 必要 で す 。 
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開い た ウィ ンド ウ に 文字 を 記述 する 





document.write( 文 字 列 ) [メソ ッ ド ] 
document.open() [メソ ッ ド ] 
document.close() [メソ ッ ド ] 


SOYd 
ETUES HIPEVMPUTAIUTTHTTHNII け は れ T は 3 DOCUMENT_SAMPLE - Microso 


イル 雪 ⑰ 表 示 Q⑰ お 所 に AO 
の @ ま ・ の 回 国人 の の 時 安 5Rc9 


+ 開 いた ウィ ンド ウ に 文字 を 記述 する 


Window Close 


JavaScnp も 記述 で きま す 。 








サン プル で は 、URL の 指定 な し に 「window.open」 を 実行 する こと に より 、 何 も 記述 し 
て いな い ウ イィ イン ドウ を 開き 、 そ の 中 に JavaScript で ドキ ュ メ ント を 記述 し て いま す 。 
ウィ ンド ウ へ の 記述 方 法 は 、 ま ず 「documentLopen0] で ドキ ュ メ ント スト リー ム を 開き 、 
そこ へ 「document.write)」 で ドキ ュ メ ント を 書き 出し ます 。 そ し て 、 ド キュ メン ト の 記 
述 を 終ら せる 時 は 、「documentclose0」 で ドキ ュ メ ント スト リー ム を 閉じ ます 。 
「document.write()] で 書き 出さ れ た 文字 は 、HTML タグ や JavaScript を 通常 通り に 評価 
する の で 、 画 像 を 貼り 込ん だ り 、JavaScript を 記述 し た り で きま す 。 

し か し 、Netscape Navigator 2.0 で は 、 画 像 ファ イル や リン ク の URL を 絶対 パス で 指定 
し な けれ ば 画像 ファ イル や ヤリ ンク が 探せ な い 時 が あり 、 そ の 結果 、 画 像 が 表示 され な 
か っ た り 、 リ ンク が 機能 し な い 場 合 が あり ます 。 そ の よう な 場合 は 、 面 像 ファ イル や 
リン ク の URL を 絶対 パス で 指定 する よう に し て くだ さい 。 
「document.open()」 は 省略 可能 で す が 、「document.close()」 は 必ず 記述 し て 、 明 示 的 に ド 
キュ メン トス トリ ー ム を 閉じ る よう に し て くだ さい 。 

も し も 「document.close()」 が 記述 され て いな いり 場合 は 、 JavaScript は 、 最 後 の 「document. 
write()」 が 読み 込ま れ て も 、 ド キュ メン ト が まだ 後に 続く も の と 判断 し て 、 待 機 状態 の 
まま に な り ま す 。 そ の 結果 、Netscape Navigator で は 最後 の 行 が 表示 され な か っ た り 、 
Intemet Explorer で 読み 込み 中 を 示す 「e] の アイ コン が 回 りっぱ な し に な り 、 最 悪 の 場合 
は 何 も 表 示さ れ な いと いう 状態 に な り ま す 。Netscape Navigator の 場合 は 、 最 後 の 行 に 
<br> な どの 改行 タグ を 入れ る こと に よっ て 最後 の 行 を 表示 させ る こと が 可能 で す が 、 
本 質 的 な 解決 で は あり ませ ん 。 








ーー 


<script ype="Eext/ avaScr1pt"> 
で ! す ーー 
Function DWO1 () { 
Yar DW1: 
DW1=window .open("", "DocWin1" ) : 
DW1 .document - open ( ) : 
DW1 .document .write ("<htm1><head>< も it1e>DOCUMENTY_SAMPLE</ 上 11e> 
時 由 
DW1 .document .wr エ ite ("< く "+"5C エ ip 上 1anguage= 'JaYa8c エ ipt!>") : 
DW1 .document .write( "Eunction WC1ose2( ) {window.c1oge( )}") : 
DW1 .document .write ("</BC エ 1p セ >" ) : 
DW1 .document .write( "</head>" ) : 
DW1 .document .write("<body>") : 
DW1 .document .write ("<1mg name='jkao' srC='1mage.d1F' a1 セ =! 
.giE' width='100' height='100'>") : 
DW1 .document .write( "<Dr>" ) : 
DW1 .document .write ("イメ ー ジ も 表 示 ぎ で きま す 。" ) : 
DW1 .document .write( "<p>" ) : 
DW1 .document .write ("<hr>" ) : 
DW1 .document write( "<Eorm>" ) : 
DW1 .document .write ("<1nput type='jbutton' name= "WC12' va1ue=' 4 
Window C1ose ' onC1iok='WC1ose2() ">"): 
DW1 .document .write ("</Eorm>" ) : 
DW1 .document .write ("<Dr>" ) : 
DW1 .document .write ("JavaSoript も 記述 で きま す 。") : 
DW1 .document .write ("</body>" ) : 
DW1 .document .write ("</htm1>" ) : 
DW1 .document .c1ose( ) : 
} 
//ー ニ ーッ 
</ Script> 
て 中 略 て 
<body> 
* 開い た ウィ ンド ウ に 文字 を 記述 する 
<D> 
<form> 
<input type="button" value=" Open!! " onC1ick="DWO1 ( ) "> 
</ Eorm> 
</p> 
</body> 
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ドキ ュ メ ント や 画像 を 後 か ら 開 く 
document.write( 文 字 列 ) [メソ ッ ド ] 
document.open() [メソ ッ ド ] 
document.close( ) [メソ ッ ド ] 
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この よう に イメ ー ジ を 開く < こと も で きま す 。 





新しい ウィ ンド ウ に 文字 を 記述 する の と 同じ 要領 で 、 プ ラウ ザ に 表示 きれ て いる 文字 
を 書き 換え る こと が で きま す 。 

上 の 例 で は 、[Open!!] ボ タン が クリ ッ ク さ れる と 、「document.open)」 で ドキ ュ メ ント 
スト リー ム が 開か れ ま す 。 同 時 に 、 現 在 表示 され て いる 文字 や フォ ー ム な ど が 消さ れ 、 
その 後に 「document.write()」 で 文字 が 書き 出さ れ ま す 。 

ウィ ンド ウ に 文字 を 記述 し た 時 と 同様 に 、「document.close()」 は 必ず 入れ る よう に し て 
くだ さい 。 

Safari で は 、 最 後に 「<br>] を 入れ な いと 、 最 終 行 が 表示 され な い 場 合 が あり ます 。 


|Somnlo 


<!DOCTYPE_ HTML PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona] / /EN"> 
<htm1><head> 

<meta htp-equ1 マ ="ConEent-Script-Type" 
content="text/]avascr1ipt"> 

<meta htp-equivY="Conten 上 -Sty1e-Type" content="text/css"> 

< ヒ 1 上 1e></ 人 上 1 上 1e> 


< く SCr1pt type="Eext/avascr1pt"> 
で ルー ニ 
function Doc4 ( ) { 
document . open ( ) : 
documen .write("<p> 『): 
document .write ("<1mg sro='1mage.Jp9' a1 モ ='1mage.]Jpg' 8 
0' height='100'>") : 
document .write ("</p> 『"): 
document .write(" ご の よう に イメ ー ジ を 開く こと も で きま す 。<br>") : 
document .c1ose( ) : 
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} 
70 ニ 


ー テ > 


< く / SCr1Dp セ > 


< く 8 キ 


に マリ キー 


yle type="text/cCss "> 


body { background-co]1or: #FFFFFF: } 


ーー テ 
</8 


ty]e> 


</head> 


<bo 


dy> 


* ドキ ュ メ ント や 画像 を 後 か ら 開 く 


<D> 


<Fo 


エ m> 


<input type="butEon" value=" Open!! " onC1ick="Doc4 ( ) "> 


</ 


OrTm テ 


く / や > 
</body> 
</htm1> 


「window.open()」 で 開い た ウィ ンド ウ に 
「document.write()」 で 文字 を 書き 出す 時 の 注意 

「 開 いた ウィ ンド ウ に 文字 を 記述 する 」(P.388) の よう に 、「window.open0」 で 
新しく 開い た ウィ ンド ウ に 「document.write()」 で 文字 を 書き 出す スク リプ ト は 、 
ウィ ンド ウ を 開い て HTML ファ イル を 読み 込む スク リプ ト に 比べ て 、 外 部 か ら フ ァ 
イル を 読み 込む 必要 が な いた め 表 示 が 早く な り ま す 。 ち ょ っ と し た メッ セー ジ を 表 
示す る 場合 に は 便利 な の で す が 、 こ の スク リプ ト は 、 Internet Explorer で は うま 
く 機能 し な い 時 が あり ます 。 特に 、「 開 いた ウィ ンド ウ に 文字 を 記述 する ] の サン プ 
ル の よう に 、 書 き 出す 文字 に JavaScript の スク リプ ト が 混じっ て いる よう な 時 な 
ど は 、 エ ラー に な る 場合 が 多く あり ます 。 また 、 同 じ バ ー ジ ョ ン の Internet Explorer 
で も 、 新 し いも の で は エラ ー が 出 な く て も 、 よ り 古 いも の で は エラ ー に な る 場合 が 
あり ます 。 

本 書 の 「 開 いた ウィ ンド ウ に 文字 を 記述 する ] な どの サン プル で は 、 チ ェ ッ ク の 結 
果 、 一 部 の Internet Explorer で は 不安 定 な 部 分 が あり まし た 。 そ の た め 、 
「window.open(0)」 で 新しく 開い た ウィ ンド ウ に 「document.write()」 で 文字 を 書き 出 
す ス クリ プ ト は 、 基 本 的 に Internet Explorer 4.0 に は 対応 し て いな いこ と に し て い 
ます が 、 書 き 出 す 内 容 や 環境 に よっ て は 正常 に 作動 し ます 。 反 対 に 言え ば 、 一 見 自分 
の 環境 で は 正常 に 動作 する よう に 見 えて も 、 他 の 環境 で は エラ ー に な る 場合 が あり ま 
す の で 、 十 分 に テス ト を 行う よう に し て くだ さい 。 
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メソッド] 


Before 


身 C*5amples\js\01 


プア イル 編集 ) 表示 お気 に 和 D⑧ ウー ル GD AM プ ⑪⑬ 閑 


G- の 回 還る の w 宮 moo 


下 の [clsarl ボ タン を 押す と 、 ここ に 
表示 され て いる 文字 や ボタ ン が 消去 され ます . 


四 


「document.open)」 で ドキ ュ メ ント スト リー ム が 開い た 時 、 プ ラウ ザ に 表示 きれ て いる 
文字 な ど が 消さ れる こと を 利用 し た スク リプ ト で す 。 

[clearl ボ タン が 押さ れる と 「documentopen()」 が 実行 され 、 表 示さ きれ て いる 文字 が 消 夫 さき 
秒 ま 入ら 

JavaScript1.0 に は 、 ド キュ メン ト を 消去 する た め に 「clear0」 と いう メソ ッ ド が 用 意 さ れ 
て いま し た が 、 JavaScriptl.1 以降 で は 、「clear0」 メ ソ ッ ド は 削除 され て いま す 。 

この スク リプ ト は 、Macintosh 版 の Imtermet Explorer 4.X で は 動作 し な い 場 合 が あり ます 。 


<htm1><head> 
<mata hp-equiv="Content-Soript-Type" Content="Eex 上 /]avascr1ipt"> 
< 上 1 上 ]e></ 上 1 上 1e> 
<SCript ype="text/]avascrip 上 "> 
に 
function Dclear ( ) { documenE .open() } 
// ーー テ > 
< く / Script> 
て 中 上 
</head> 
<body> 
<b>* 文字 を 消去 する </b> 
く D> 
下 の [c1ear] ボ タン を 押す と 、 ここ に 
<br> 
表示 され て いる 文字 や ボタ ン が 消去 され ます 。 
く /Dp> 
<h エ > 
< く Form> 
<1nput type="button" va1ue=" clear " onC1ick="Dc]ear ( ) "> 
</ Eorm> 
</ body></htm1 > 


2 aumew オ ラジ ェクト 


リル ピン ルリ) し ュ 」 7 六 ) 


Gocument.alinkColor=" 名 誠 定 " [プロ パテ ィ ] 
Gocument.bgColor=" 台 閣 定 " [プロ パテ ィ ] 
document.f8Color=" 台 着 " [プロ パテ ィ ] 
document.linikColor=" 双 匠 定 " [プロ バ パティ] 
document.ylinkColor=" 名 誠 定 " [プロ バ パティ] 


EGO 
ヨ CYSamplesYjeYDnnay 
ファ イル 編集 


@*・ の ・- 申 






当 http//www shuwasystem.cop - 株 式 会 詩 表 和 シ ステ ム .… 司 | 還 | 区 | 
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栓 二 < 唐 お AD 





内 新刊 書 短 ん 書 短 検索 


お 気 に 和 0(⑩ ツー ル ① AA ルプ ⑬ 麻 


| 国人 ぬ 0 の 喜 5wO9 





「alinkColor]」 プ ロ パ ティ は アク ティ ブリ ンク の 色 の 値 を 、「fgColor]l プ ロ パ ティ は フォ ア 
グラ ウン ド 、 つ まり テキ スト の 色 の 値 を 、「linkColor] プ ロ パ ティ は リン ク の 人 色 の 値 を 、 
「ylinkColor] プ ロ パ ティ は すでに 行っ た こと の ある リン ク の 人 色 の 値 を 、 そ れ ぞ れ 持 っ て 
いま す 。 

サン プル で は 、 そ れ ぞ れ の プロ パテ ィ に 色 の 値 を 設定 する こと に よっ て 、 ブ プラ ウザ に 
表示 され る テキ スト や ヤリ ンク の 人 色 を 指定 し て いま す 。 

色 指 定 は 、 色 の 名 前 か 16 進数 で 設定 し ます 。 

これ ら の 設定 は 、<body> 内 に 記述 する HTML で の 色 指 定 よ り 、 優 先 さ れ ま す 。 








dooumet オ ブ ジ ェクト 393 


( 芋 証 草 ipocmypE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1//EN"> 
リ 子 朋 リ <htm1> 

<head> 

<mata htEp-equ1iVv="ConEent-Soript-Type" Content="Eext/avascript"> 
< 上 1 上 ] e>< / 上 1 上 1e> 


























<SCr1pt type="text/]avascr1p 上 "> 
く ! ーー 

document .EgCo1or="white" : 
document .11nkCo1or="green" : 
document .Y11njkCo1O ェ =" 失 EE00" : 
document .a1infkCo1or="#000000": 
リッ フー 

</ sCript> 


</head> 

<body bgco1or="#000000"> 

<p>* テ キス ト や リン ク の 人 色 を 指定 する </p> 

・ テ キス ト の 色 は 白 。<br> 

・<a href="NoLink .htm1 "> リン ク の 色 は 緑 。</a> 

< く b エ > 

・<a href="hEEp: / /www . ShuwasysEem.co . 0 
は 黄色 。</a> 


< く b エ > 

・<a href="#"> リ ンク を クリ ッ ク し た 時 の 色 は 黒 。</a> 
</body> 

</htm1> 








Netscape Navigator 2.0 で ドキ ュ メ ント を 
その 場 で 書き 換え る スク リプ ト を 使用 する 時 の 注意 
Netscape Navigator 2.0 で は 、 ド キュ メン ト や 画像 を 後 か ら 開く スク リプ ト 
や 、 文 字 を 消去 する スク リプ ト は 非常 に 不安 定 で す 。 最悪 の 場合 は シス テム エラ ー 
を 引き 起こ す 場 合 が あり ます (Macintosh 版 で 確認 )。 
また 、「document.close()」 を 記述 する と 、 本 来 そ て で ドキ ュ メ ント の 記述 が 終 
了 し た と 判断 され な けれ ば いけ な い は ず な の で す が 、 反対 に 待機 状態 に な っ て し ま 
う 場 合 が あり ます 。 









育 景色 を 変え る ポタ ン を 作る 


document.bgColor=" 台 閣 定 " [プロ パテ ィ ] 
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アイ ル ⑤) 相 集 (D 表示 お気 に 入 0D⑳ ウ - ル D へ JM プ ⑪ 







議 議 2 大 表示 ⑦ お気 DQ 
DICEOWSkiie0 


MO. の 同軸 の の w 壇 Pmoo 


呈 人 HEAI 間 開 じ ELEHL2S 間 較 L3HT2 間 間 (WEE- の Wi 


「bgColor]」 プ ロ パ ティ は 、 バ ッ ク グ ラウ ンド の 人 色 の 値 を 持っ て いま す 。 
サン プル で は 、 ボ タン を クリ ッ ク し た 時 に 、「document.bgColor」 プ ロ パ ティ で 設定 し て 
いる 色 の 値 が 評価 され 、 背 景色 が その 場 で 変わ り ま す 。 


ED 揚 EE 
<body bgco1or="#FFFFFfF"> 
<p>* 背景 色 を 変え る ボタ ン を 作る </p> 


<hr> 





<fForm> 

<input type="button" va1ue=" 背景 を 白 へ " WM 
='!white' "> 

<input type="button" va1ue=" 背景 を 緑 へ " Eo 
='green'"> 

<1nput type="button" va]ue=" 背景 を 黄色 へ " 人 
ェ =「 提 EEF00! "> 

<1nput type="button" value=" 背景 を 黒 へ " 
='!#000000'"> 

</ form> 

</body> 
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テキ スト の 色 を 変え る ボタ ン を 作る 
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document.fgColor=" 双 症 " 
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文字 を 旨 へ 文字 を 攻 色 へ 壇 字 を 黒人 へ 


Sa ね 7 







イル) 幼生 表示 ⑦ お 気 に 入 9⑤ ツー ル D AM プ ⑪ 
@・ の 回 胃 の の es 誠 5moo 
* デ テキ スト の 色 を 変え る ボタ ン を 作る 


パ *Mczils で は 、 レイ アウ ト 確 定 後 も 文字 の 色 
ます 。 
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Fw ] し SE 度 [ FtAA | 






ォ * テ キス ト の 色 を 変え る ボタ ン を 作る 





を 変え る こと が で きま す 。 








の + 寺 落球 テツ ベロ キテ 人 


[プロ パテ ィ ] 


cy5emplesyjsYpinevieatorYD6docmentYi0Yndexhrm-. 司 | 問 了 


アイ ル E) 編集 表示 ) お 気 に 入 D@ ツー ル D へ ルプ ⑪ 


@・ の 回 国人 ぬ の ws 寄 5Rco 








Internet Explorer や Mozila で は 、 レイ アウ ト 確定 後 も 文字 の 色 


区 手 を 自 へ | | 大 字 を 引 へ ] [ 交 手 を 重 色 へ ほ =sh | 





Internet Explorer や DOM が 採用 され た Netscape 6.X 以降 で は 、 ペ ー ジ の レイ アウ ト が 
確定 し た 後 か ら で も 、 表 示さ れ て いる テキ スト の 人 色 を 変え る こと が で きま す 。 

サン プル で は 、 ボ タン を クリ ッ ク さ れ た 時 、 プ ラウ ザ の テキ スト の 色 の 値 を 持っ た 
「document.fgColor] プ ロ パ ティ で 設定 し て いる 色 が 評価 され 、 テ キス ト の 色 が その 場 で 


変わ り ま す 。 


6 ame オラ ジェ クト 





2 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML. 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta htEtp-equ1v= "ConEent-Script-Type" content="t 上 ex 上 / avaSCr1p 上 "> 
< 上 it]1e></ 上 1 上 1e> 

</head> 

<body bgco1or="#FFFFFfF"> 

* テ キス ト の 色 を 変え る ボタ ン を 作る 

<D> 

TnEernet Exp1orer や Mozi11a で は 、 レ イア ウト 確定 後 も 文字 の 色 を 変え る こと が で きま す 。 
</p> 

<h エ > 


<form> 

<input type="button" value=" 文字 を 白 へ " 0 
white'"> 

<input type="button" value=" 文 字 を 緑 へ " SO 
green'"> 

<input type="button" value=" 文 字 を 黄色 へ " 人 
= ミリ 提 EEEE00! "> 

<input type="button" value=" 文 字 を 黒 へ " 1 
#000000'""> 

</ form> 


</body> 
</htm1> 








市 
に 
に 】 


リ 子 生 】 
リリ 
リズ 


太 re7ox 
の 2 た 


4.06 


ヒコ 


し 55s | 
し gs | 
zo | 
Lgretox 
gde_ 


Sa ね / 


在 5-mac 
/E4.mac 


の 引 土 藩 避 テツ ペロ キー 








テキ スト の 色 を 変え る 
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アイ ル ( 上 編集 表示 お 気 に 和 AO ウー- ル ①D AM プ 0 
GO の 回 の の me 家 Poo 


"デキ スト の 色 を 識 
バー ジョ ン 6 0 よ 

文字 の 色 を 変え る 
ちょ っ と し た 工夫 が 必 























きま せん 。 
) ま す 。 


















文字 を 賞 色 へ ] [| 文字 を 所 へ ] 










アイ ル D 電 和 ⑰ 表 二 OO お 気 に AD ウル D へ 2 
@ 呈 の 回 国人 ぬ の ws 実 swoo 


キ 下 を 云え る 






















アイ ル (E) 罰 業 5) 表示) お 気 に 入 D⑯ ツー ル ①D へ ルプ ⑪ 


GO の 回 人 6 の we 誠 k2D 

















文字 を 白 へ | [ 文字 を 由 へ ] | 手 を 合 A ゆっ CN) 









バー ジョ ン 6.0 より 前 の Netscape Navigator で は 、1 度 レイ アウ ト が 確定 し て し まう と 、 
バッ ク グ ラウ ンド の 人 色 以 外 の テキ スト や リン ク の 人 色 を 変更 する こと が で きま せん 。 
サン プル で は 、 フ レー ム 「2]」 か ら ボ タン が クリ ッ ク さ れ た 時 に 、 テ キス ト の 人 色 の 値 と 
一 緒 に フレ ー ム 「fl」 へ 、 フ レー ム 「fI」 と 同じ レイ アウ ト の ドキ ュ メ ント を 書き 出し て い 
ます 。 実際 に 試す 場合 に は 、 こ の 他 に [fl.html] を 用 意 し て くだ さい 。 


| Samplc 王 呈 時 


【 フ レー ムウ ィ ン ド ウ 】 
< く !DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Frameset//EN" > 
<htm]> 


6 doaamaw オ ラジ ェクト 


<head> 
< 上 1 上 1e></ 上 1]e> 
</head> 
<FErameset rows="*,100"> 
<frame src="F1 .htm1" name="F1"> - 
<frame Sro="fF2 .htm1" name="F2"> Frefox 
</ frameset> Moza 
<noframeS> WVZ7X 
フレ ー ム 機能 を 使用 し て いま す 。 フ レー ム 対 応 の ブラ ウザ で 試し て くだ さい (^_^) 。 
</noframe8> 
</htm1l> 


【f2.html】 
<!DOCTYPE HTMI, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm]><head> 
<meta http-equ1v="Content-Script-Type" Content="Eex/ avaScr1p 上 "> 
< 上 it 上 1e> 
</tit1e> 
<sCript type="tex/]avaSscr1pt "> 
く ! ニー 
function TP(TC) { 
parent . F1 .document . open ( ) : 
parent . 1 .document .wr ュ モ e ("<jbody bgCO1O エ = ! 井 下條 下 人 ! 上 ex セ = リ ") : 
parent . f]1 .documen .write(TC) : 
parent . 1 .document .write(">") : 
parent . 1 .document .write("* テ キス ト の 色 を 変え る <br>" ) : 
parent . f]1 .document .write ("バー ジョ ン 6 .0 より 前 の " ) : 
parent . 1 .document .write ("Netscape の 場合 、1 度 レイ アウ ト さ れ た <br>" ) : 
parent . F1 .document .write ("文字 の 色 を 変え る こと が で きま せん 。<br>") : 
parent . 1 .document .w エ ite ("ちょ っ と し た 工夫 が 必要 に な り ま す 。<br>" ) : 
parenrt . 1 .document .c1ose ( ) 
} 
(ソニ 
</ SCr1p セ > 
</head> 
<body bgco1or="#EFF 和 FT 和 ffF"> 
<fForm> 
<input type="button" value=" 文字 を 白 へ " onC1ick="TP('white') "> 
<input type="button" value=" 文字 を 緑 へ " onC1ick="TP('green' ) "> 
<input type="button" Value=" 文字 を 黄色 へ " onC1ick="TP( '#FFFFO00') "> 
<input type="button" value=" 文字 を 黒 へ " onC1ick="TP( '#000000') "> 
</ Form> 
</body> 
</htm1> 
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eo 
背景 画像 を 変更 する 





document.getElementById( オ プ ジ ェクト る る ).background= ひ 刀 
[プロ バ パティ] 


Before 


当 C:\Samples\js\01 


良 C-\Samples\js\01nayigator\D6docment\12\index.htm 


アイ ル (F) 編集 ) 表示 お 気に入り ウー ル ①⑪ ん へ MI プ ⑪ 


に の 回 還る Fe 


Netscape 6.0 か ら は 、DOM の 採用 に より 、 基 本 的 に HTML タグ の あら め ゆる 属性 へ 、 
JavaScript か ら ア クセ ス で きる よう に な り ま し た 。 

サン プル で は 、 そ れ を 利用 し て <body> の 「backsground」 の 値 を 変更 する こと に よっ て 、 
ブラ ウザ の 背景 画像 を 変更 し て いま す 。 

サン プル で は 、TImnteret Explorer 4.X と それ より 人 後 の バ パー ジョ ン の Intemet Explorer の 
DOM の 実装 の 違い を 考慮 し 、「getElementByld)」 メ ソ ッ ド と [all()」 メ ソ ッ ド の どちら 
を サポ ー ト し た プラ ウザ で も 、 対 応 で きる よう に し て いま す 。 ま た 、Imntemet Explorer 
5.1 で は 、 背 景 画像 を 変更 する 時 に 、 ブ プラウザ に 表示 され て いる 文字 が 背景 画像 に 塗り 
つぶ され て し まっ た よう に な る 場合 が あり ます 。 

JavaScript1.5 で 追加 され た プロ パテ ィ で す 。 


| Sanplo 還 


< く !DOCTYPE HTMTL PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm1> 

<head> 

<meta http-equ1v="Content-Script-Type" conEen="Eex/]avascr1pt"> 
< 上 1t1e></ 上 it1e> 


<SCript ype="Eex/]avascript"> 
さ ル ニー 
Function BackTmg1 ( ) { 


100 documert オ ブ ジ ェクト 








if (document .getE1emenEByTd) { 

document .getE1ementByTd ("BacjkTmg" ) .background = "BACK2.]pg" 
} 
if (document . a11 ) { 

document .a11 ("BackTmg" ) .bacjkground = "BACK2.]pg" 


} 7 ガル 1 


) の 7 
function BackTmg2 ( ) / 
if (document . getEl1ementByTd) { 
Gocument .get 互 1ementByTGd ("BackTmg" ) .background = "BACK1.]pg" 
} 
if (document .a11 ) { 


document .a11 ("BackTmg" ) .bacikground = "BACK1.]jpg" 


} 
//-ー> 
</ SCr1Dt> 


</head> 
<body 1d="BackTmg" background=" BACK1 . pg "> 
* 背景 画像 を 変更 する 
<D> 
<form> 
<input type="button" value=" 背 景 を 変更 する 1 
CK2.Jpg') "> 
<input type="button" value=" 戻 す " RON 
りり) "> 
</ form> 
く /P> 
</body> 
</htm1> 
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委 C-\Samples\js\01navieator\D6doc 


アイ ル 編集) 表示 ⑰ お 気に入り ⑱) ツー ル GD ヘル プ ⑪ 
〇 = の 司る の ws 家 pmco 
* ク ッ キ ー フ ァイル へ 書き 込む 


AccessTime2005 年 2 月 24 日 1212.12 





JavaScript で は 、cookie ファ イル に 情報 を 書き 込み 、 利 用 する こと が で きま す 。 
cookise ファ イル は 、 ロ ー カ ルディ スク 上 に 置か れ 、 個 人 を 特定 する 情報 や 特定 サイ ト 
を 利用 する の に 必要 な 情報 を 保存 し て いる の で 、 そ の ユー ザー が サイ ト を 訪れ た 回 数 
を 表示 し た り 、 ユ ー ザ ー に 合わ せ た 情 報 を 表示 する こと が で きま す 。 

JavaScript は 、 セ キュ リティ 上 の 関係 か ら 、 ロ ー カ ルフ ァイル な どの コン ピュ ー タ の 
ロー カル 資源 へ の アク セス は 、 基 本 的 に 行え を な いよ うに な っ て いま す 。 cookie ファ イ 
ル は 、JavaScript が 唯一 アク セス で きる ロー カル 資源 で す 。 

cookie ファ イル の 使用 に つい て は 、 記 録 で きる 情報 量 を 制限 する な どの 対策 が と られ 
て いる の で す が 、CGI な ど で 利 用 し た 場合 は ユー ザー の 行動 を ある 程度 監視 する こと 
が で きる な どの 理由 か ら 嫌 う 人 も いま す 。 

サン プル で は 、HTML ファ イル が 読み 込ま れ た 時 の ロー カル タイ ム を cookie ファ イル 
へ 書き 込み 、 そ れ を また cookie ファ イル か ら 読 み 出し て 表示 し て いま す 。 

Macintosh 版 の Intemet Explorer で は 、 設 定 に か か わら ず cookie の 値 を 取得 で き な い 場 
合 が あり ます 。 


| Samplc 間 還 還 較 


<SCript type="text/]avaSscr1p 上 "> 

に ドー 

Time = new Date() : 

document .cookie=T1me .EoLoca]eStrind ( ) 
document .write ("AccessTime :"+document . cookie) : 
7 が ーー 

< く / SCr1pt> 


⑫ toLocaleString() : 「Date オブ ジェ クト 」 の [国際 標準 時 や ロー カル タイ ム を 表示 する 」(P.506) 





選択 し た 文字 を 返す 


[メソ ッ ド ] 


Before 
じ TIIEE ド に し 
ファ イル 引 集 ) 表示 移動 ブッ 2 マー2GB) ウール 表 二 Q/ 移動 ①) プッ クマ ー2GB) ツー ル D ヘル 200 な 
を - ゆ -@ ら @omela_ = を: ゆ 人 の GO の omi _ 
* ネ 選択 し た 文字 を 返す * 記 択 し た 文字 を 返す 
"JavaScript "と は 、 ジ "JavaScript" と は 、 Netscape 社 が Web ペ ー ジ の 処理 能 
に 力 を 高め る た め に | “LiveScript "を 元 | 
etcpcf 3 Nrooopcf と Sm 計 し スク リプ ト = 
現在 Netscape Navlgator 2.0 以 降 の プ : 現在 Netscape Navigator 2.0 以 降 の ブラ ウザ よ Internet 
Fxplorer 3.0 以 降 の ブラ ウザ で 対応 され て いま す 。 Explorer 3.0 以 降 の ブラ ウザ で 対応 され て いま す 。 


Netscape 社 と Sur が 共同 で 開発 し た ス 
クリ ブ ト 言語 


還 RN ess] 


「getSelection()]」 メ ソ ッ ド は 、 マ ウス な ど で 選 択 さ れ た 文字 を 返し ます 。 

フォ ー ム に 値 を 渡す こと が 可能 な の で 、 サ ンプ ル の よう に 選択 し た 文字 テ キス ト エ 
リア に 書き 出す こと も で きま す 。 

JavaScript1.2 で 追加 され た メソ ッ ド で す 。 


| Samplc 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta http-equ1v="Content-Script-Type" conEent="Eex/ avaScr1p 上 "> 
<meta http-equ1iv="Content-Style-Type" content="text/css"> 
<t1t1e></ 上 it]e> 


<SCr1pt type="Eext/ avVaSCr1p 上 "> 
こら 
function se1ct() { 
document .OUTP . outp .va]ue = document .getSe1eotion( ) : 


} 
/ ガ ーー テ 
</ SCript> 


<sty1e type="Eext/css"> 

ペーー 

body { background-co1or: #EEFFFF: } 
ーー テ 

</ sty1e> 

</head> 





如 re7ox 
/oz//a 
リリ ル 1 
6.X 
2.06 
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左 5-mac 
/E4-mac 
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キ 
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在 5-mac 
放 4-mac 


の 叶 土 藩 テ ソロ キー 用 


<body> 

* 選択 し た 文字 を 返す 

<b1oclikqruote> 

<b> "JavaScript"</b> と は 、 Netscape 社 が Web ペー ジ の 処理 能力 を 高め る た め に 開発 し 

た <b>"LiveScript"</b> を 元 に 、 Netscape 社 と Sun が 共同 で 開発 し た <b> スク リプ ト 

言語 </b> で 、 現在 Netscape Navigator 2.0 以降 の プラ ウザ と Tnternet Exp1orer 
3 .0 以降 の プラ ウザ で 対応 され て いま す 。 

</b1ocjkquote> 

く h エ > 

<fForm name="OUTP"> 

<textarea name="Ooutp" rows=5 col1s=30> 

</textarea> 

<Pp> 

<input type="button" va1ue=" 選択 !! " onC1ick="se1ct ( ) "> 

<1nput type="reset" value=" Cl]ear "> 

く /D> 

</ Form> 

</body> 

</htm1l> 


ee 


その 他 の document オ ブ ジ ェクト 
domain [プロ バテ ィ ] 





複数 の サー バー 名 を 、 ひ と つの ドメイン 名 と し て 取り 扱え ます 。 

た と えば 、 ひ と つの ウィ ンド ウ の 別々 の フレ ー ム に 、「search.hamba.com」 と 「www. 
hamba.com」 の ふた つの サー バー か ら の デー タ を 表示 させ る 場合 、「domain」 プロパ ティ 
に よっ て 各々 の サー バ 名 を 「hamba.com」 と し て 扱う こと が で きま す 。 

た だ し 、 ド メイ ン 名 部 分 を 変え 0 ろ こ と は で きま せん 。 つ まり 「search.hamba.com」 を 
「search.com] の よう に 変え た る こと は で きま せん 。 ま た 、1 度 ドメイン 名 を 変更 する と 、 
変更 前 の ドメイン 名 を 参照 で き な く な り ま す 。 

JavaScript1.1 で 追加 され た プロ パテ ィ で す が 、Imternet Explorer は 未 対応 で す 。 

その ウィ ンド ウ が 、 他 の ウィ ンド ウ 、 あ る い は フレ ー ム か ら 、 プ ロ パ ティ な どの デー 
タ の 参照 を 許し て いる 状態 (tainting の 状態 ) か どう か を 調べ ます 。 

実際 の 指定 は 、 次 の 例 の よう に 行い ます 。 


証 ee 


document .domain=" 指 定 す る ドメイン 名 " 












After 
語 CYS5amplezjsY01navieator\06docment\14Wimderht 
アイ ル わ 罰 集 6) 表示 Q⑦ お 気に入り (⑯ ツー ル CD へ ルプ 


@ 呈 の - | 還 人 の の 時 宮 5m29 
* 選 択 し た 文字 を 返す 
MayeScret と は Netsae 入 が Ve ペー ジ の 


SO 
等 CrY5amplesYjsYTn 
アイ ル (P 編集 E) 表示 ⑰ と RE000 ッ - ル CD AM プ ⑪D 


の 回 還 人 の の 実 smc 
+ 戻 る ボタ ン を 作る 
SS! 


プラ ウザ の [戻る (Back)] ボ タン と 同じ 働き を する スク リプ ト で す 。 
フォ ー ム の ボタ ン が 押さ れ た 時 に 、「onClick」 で 指定 し て いる 「history.back()」 が 評価 さ 
れ 、 ひ と つ 前 の ペー ジ へ 戻り ます 。 戻る ペー ジ が 来歴 内 に な い 場 合 は 何 も 起き ませ ん 。 
複数 の ペー ジ か ら リ ンク を 張っ て いる ペー ジ で 使う と 効果 的 で す 。 


ET 所 ee 


<fForm> 
<1nput type="butEon" value=" Back " onC1ick="higtorY.back ( ) "> 
</ form> 









進む ボタ ン を 作る 


history.forward() 


Before 


軸 CYSamplesyjsWD1nayicatorY07himreryWD2Wmdex.Dtm 


イル) 紀 集 D 表示 ⑰ お 気 に 入 D⑯ りー- ル D AA2⑪D アイ ル (上 編集 E) 表示 お 気 に 入 D⑯ ツー ル ① へ ル 2⑪ 
の 系 ・ の ・ 還 較 人 の の 実 5 G・ の 還 還 人 の の ws 宮 5moD 


和信 む ボタ ン を 作る 





プ ブラ ウザ の [進む (Forward)] ボ タン と 同じ 働き を する スク リプ ト で す 。 

フォ ー ム の ボタ ン が 押さ れ た 時 に 、 イ ベン ト ハ ンド ラ [「onClick」 で 指定 し て いる 
「history.forward()」 が 評価 され 、 ひ と つ 先 の ペー ジ へ 進み ます 。 進 む ペ ー ジ が 来歴 内 に 
な い 場 合 は 何 も 起 きま せん 。 


| Samplc 生還 


<form> 


<1nput type="button" value=" Forward " onC]iock= "history.Eorward ( ) "> 
</ form> 
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複数 ペー ジ を 戻っ た り 進 ん だ りす る ボタ ン を 作る 
onClick="history.go(n)" [メソ ッ ド ] 









当 CYSamples\js\01navigator\D7history\03imdex ht 


ファイ ル 5) 訪 集 D 表示 お 気 に 入 D(@U 
>MHIEEOIP4 


* 複 数 ペー ジ を 戻っ た り 進 ん だ りす る ボ ダ ノ を 作る 










当 CYSampleswjsY01navieator\06docement\i1Windexhtml 


アイ MP 橋 業 D 表示 ⑰ お 気 に 入 D ウール ① へ ルプ 
@・ の ・ 由 四 人 の の ws 到 5mo9 


* 選 択 し た 文字 を 返す 














9 ペー ジウ 戻る 3 ページ 戻 る 、] [| 2 ペー ジ 傍 5 ] [ 3 ペー ラ 通 お ] 














^JavaScript~ と は 、 Ne:scape 社 が Web ペ ー ジ の 処理 
能力 を 高め る た め に 開発 し た "LiveScript“ を 元 に 
Netscaps 社 と Sun が 共同 で 開発 し た スク リブ ト 言 語 
で 、 現在 Netscaps Navigstor 2 0 降 の ブラ ウザ と 

剛 met Epibrsr 30 以 降 の ブラ ウザ で 対応 され て いま 
















呈 CYSemplesYjyD1navieatory07histcry\D3Windexhtml- M.. 隔 


アイ ル (E) 由 集 E) 表示 ⑦ お 気 に 和 AO ウー ル D へ ルプ 
@・ の 回 還 の の 天 5moo 


* 福 数 ペー ジ を 戻っ た り 進ん だ りす る ボタ ダン を 作る 


[し 3 ベー 戻る ] | 2 ペー ジ 戻 る ] 2 パー23W5 3 ペー ジ 導 も 












等 C-Y5amplesYjsW01nayigator\0Blocation\02Ymdex.html 


カイル 編 委 ) 表示 お 気 に 和 0 ツー ル D AM プ ⑪ 
@*・ の 回 還る の ws 宮 moo 
* 入 力 さ れ た URL へ 進む フォ ー ム を 作る 
htp// [se 」 

























複数 の ペー ジ を 戻っ た り 進 ん だ りす る ボタ ン の スク リプ ト で す 。 

フォ ー ム の ボタ ン が 押さ れ た 時 に 、 イ ベン ト ハ ンド ラ 「onClick」 で 指定 し て いる 
「history.go(n)」 が 評価 され 、「n] の 数 値 分 ペー ジ を 移動 し ます 。 

また 、「gso(URL)」 と 指定 する と 、 来 歴 内 の 指定 され た ペー ジ を 表示 し ます 。 移 動 する 
ペー ジ が 来歴 内 に な い 場合 は 何 も 起き ませ ん 。 

Imtermet Explorer で は 、 う まく 機能 し な い 場 合 が あり ます 。 


2 間際 


<fForm> 
<1nput type="butEton" value=" 3 ペー ジ 戻 る " onC1ick="history.go( -3 ) "> 
<1nput type="buEEon" value=" 2 ペー ジ 戻 る " onC1ick="history.go(-2) "> 
<1nput type="button" value=" 2 ペー ジ 進 む " onC1ick="history.go(2) "> 
<1nput type="butEon" value=" 3 ペー ジ 進 む " onC1ick="history.go(3) "> 
</ Form> 


⑫ onClick : リ ファ レン ス 「 イ ベン ト ハ ンド ラ 」 の 「onClick」(P.620) 








[プロ バ パティ] 


[currenll プ ロ パ ティ は 、 現在 表示 され て いる ウィ ンド ウ と 同じ URL の 値 を 持っ て いま す 。 
その ウィ ンド ウ が 、 他 の ウィ ンド ウ 、 あ る い は フレ ー ム か ら プ ロ パ ティ の 参照 を 許し て 
いる 状態 (tamting の 状態 ) の 時 の み 機 能 し ます 。 

サン プル で は 、「currenll プ ロ パ ティ に 「hnamba.com」 と いう 値 が 含ま れ て いる か どう か を 検 
索 し 、 含ま れ て いる 場合 は 「 処 理 ] を 実行 し ます 。 

JavaScriptl.1 で 追加 され た プロ バ パティ で す 。 


| 


if (history.current . indexOf ( "hamba.com" ) != -1) { 処理 } 


ゴリ UE 0A ん ピル オセ 4 に 
CulrYent 


| | DreVious [プロ パテ ィ ] | 


「previouns] プ ロ パ ティ は 、 ブ ラウ ザ の [戻る (Back)] ボ タン で 得 ら れる の と 同じ URL の 
値 を 持っ て いま す 。 

その ウィ ンド ウ が 、 他 の ウィ ンド ウ 、 あ る い は フレ ー ム か ら プ ロ パ ティ の 参照 を 許し 
て いる 状態 (tainting の 状態 ) の 時 の み 機 能 し ます 。 

次 の 例 で は 、「previous] プ ロ パ ティ に 「hamba.com」 と いう 値 が 含ま れ て いる か どう か を 
検索 し 、 含 まれ て いる 場合 は 「 処 理 ] を 実行 し ます 。 

JavaScriptl.1 で 追加 され た プロ パテ ィ で す 。 


if (history .previous .1ndexOFf ( "hamba.com") != -1) ({ 処理 } 


| next [プロ パテ ィ ] | 


「nexul プ ロ パ ティ は 、 プ ラウ ザ の [進む (Forward)] ボ タン で 得 ら れる の と 同じ URL の 値 
を 持っ て いま す 。 

その ウィ ンド ウ が 、 他 の ウィ ンド ウ 、 あ る い は フレ ー ム か ら プ ロ パ ティ の 参照 を 許し 
て いる 状態 (tainting の 状態 ) の 時 の み 機 能 し ます 。 

次 の 例 で は 、「nextl プ ロ パ ティ に [hamba.com] と いう 値 が 含ま れ て いる か どう か を 検索 
し 、 含 まれ て いる 場合 は 「 処 理 ] を 実行 し ます 。 

JavaScriptl.1 で 追加 され た プロ パテ ィ で す 。 


if (history .next . indexOf ( "hambpa . com" ) != -1) { 処理 } 





し 
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ぷ 胃 涯 避 凌 和 病 1dn 用 


自 ペ ー ジ の URL を 取得 する 


1ocation.href [プロ パティ] 
1ocation.protocol [プロ バテ ィ ] 
1ocation.hostname [プロ バテ ィ ] 
1ocation.pathname [プロ バテ ィ ] 
1ocation.port [プロ パテ ィ ] 
1ocation.host [プロ パテ ィ ] 








E TUI HOKAIdic/test/mdex . 司 


アイ ル E) 編集 E) 表示 ⑦ お 気に入り @) ツール ① へ ルル 2⑬ 
〇 や の 回 胃 る の ww pmoo 


* 自 ペー ジ の URL を 取得 する 


mmm shuwasystem.co jp 







URL: 
http//wwwshuwasystem co jp/SHOKAIdic/test/indexhtml 
ブ プロトコル: http 

ホス トコ ンピュータ 名 :wwwvshuwasystem co jp 

パス 名 :/SHOKAldic/test/indexhtml 

コミ ュ ニ ケー ショ ン ボ ー ト 番号 : 

ホス ト 名 ・ ボ ー ト 番号 :wwwshuwasystem cojp 













locaiion オプ ジェ クト に は 、URL に 関す る 情報 が 格納 され て いま す 。 

「href] プ ロ パ ティ は URL 全体 の 値 を 、「protocoll プロパ ティ は URL 内 の htp や ftp な どの 
プロ トコ ル 部 分 の 値 を 、「hostname」 プロ パテ ィ は URL 内 の ホス ト 名 部 分 の 値 を 、 
「pathname」 プ ロ パ ティ は URL 内 の パス 名 部 分 の 値 を 、「portl は URL 内 の :8080 な どの 
ポー ト 番 号 の 値 を 、「hostl は ホス ト 名 と ポー ト 番 号 部 分 の 値 を も 、 そ れ ぞ れ 持っ て いま す 。 
location オプ ジェ クト に は 、 こ れ 以 外 に も 「hash] プ ロ パ ティ (アン カー) や 「search] プ ロ パ 
ティ (? で 始ま る 問い 合わ せ 文 字 列 ) が あり ます 。 


| Samplc 還 還 


< く SCr1p ype="Eex 上 /]avascript"> 





で 小 == 

document .write( "URL:",1ocation.href ) : 

document . write ( "<Dr>" ) : 

document .write ("プロ トコ ル :" ,1ocation .protoco1 ) : 
document .write( "<Dbr>" ) : 

document .write ("ホス トコ ンピュータ 名 :" , 1ocation .hostname ) : 
document .write( "<br>" ) : 

document .write ("パス 名 :" ,1ocation .pathname ) : 

document .write ( "<br>" ) : 

document .write ("コミ ュ ニ ケー ショ ン ポ ー ト 番号 :" , 1ocation .port ) : 
document . write ( "<Dr>" ) : 

document .write ("ホスト 名 - ポ ー ト 番号 :" , 1ocation .hogst ) : 
//-ー テ > 

< く / SCr1D キ > 


06 emmon チ ラジ ェクト 





入力 され た URL へ 進む フォ ー ム を 作る 


[プロ バ パティ] 









Before 
当 CrYSamples\js\D1nayieator\DBlocation02Vindex html 


イル 計 和 (6 表示 お 和 に AD ウー ル D へ M プ 69 イル 計 D 表示 ⑰ お に 0 ツー ル D へ JJ プ 0⑪ 
OO 京 ・ の 癌 還る の 時 誠 5moo Q 〇 ま ・ の - 還 国 人 の の 時 宮 smD 


* 入 力 され た URL へ 進む フォ ー ム を 作る 


http//www ahuwasystem co p 人 | 


サン プル で は 、locatiion オプ ジェ クト が 動 的 に URL を 変更 で きる こと を 利用 し て 、 ボ 
タン が クリ ッ ク さ れ た タイ ミン グ で フォ ー ム の 内 容 を 参照 し 、 フ ォ ー ム に 入力 され た 
URL の 値 を 「hrefl プ ロ パ ティ に 設定 する こと に よっ て 、 フ ォ ー ム に 入力 され た URL が 
ブラ ウザ に ロー ド さ れ ま す 。 

また 、 も し フォ ー ム に 何 も 入 力 さ れ て いな い 時 に は 、 秩 告 用 の ダイ アロ グ ボ ックス が 
開き ます 。 入 力 さ れ た URL が 不正 な 場合 は 、 プ ラウ ザ 自 身 が 警告 用 の ダイ アロ グ ボ ッ 
クス を 出し 、 利 用 者 に 注意 を うな が し ます 。 


EE 所 eg 


<SCript ype="Eext/]avaSCr1p 上 "> 
く !- こ 


function LC(go) { 


if (go.ur1.value != "") { 1ocation.href=qo .ur1 .Value } 
else ( alert( "URL を 入力 し て くだ さい 。 " ) } 
} 
// ーー テ > 
< く / SCr1pt> 
て 中 略 


<fForm name="URL"> 

<1input type="Eext" name="ur1" va]lue="htEp: //" size=40> 

<input type="button" name= "CF" Value=" GO!! " 20 
rm) "> 

</ Form> 


(⑳ <input type=button'> :「Form オ ブ ジ ェクト 」 の 「 ボ タン を リン ク に 使う 」(P.426) 





語 
に 
に 】 


店 
Km 
いい 


太 re7ox 
Moz/a 


Opera/ 
Opeya6 


回 回 に 周回 
に 3 に 3 た < コ こう 】【 こ 】 


Sa ね 7 


放 5-mac 
/E4-mac 


wl 胃 涯 避 炎 交 1dn 上 








ファ イル (編集 人 E) 表示 お 気 に 入 D⑳ ウー- ル D %J プ ゆ 


@ 京 ・ の ・ 図 語 の の es pRo 





* ペ ー ジ の ロー ド が 完了 レ し て か ら 次 の ペー ジ を ロー ド す る 


ー ジ の ロー ド が 終っ て か ら 10 秒 後に 別 の ペー ジ へ 移り ます . 。 


Sa ね 7 
圧 5-mac 
左 4-mac 





ペー ジ の ロー ド が 終っ て か ら 10 秒 後 に 関数 [NEXT10」 が 発生 し 、「location.href | で 設定 
し て いる URL を プラ ウザ に ロー ド し ます 。 

次 の ペー ジ を ロー ド す る タイ ミン グ は 、「setTimeoutCNEXT1()'.10000)」 内 の 「10000」 を 
変更 する こと で 変え られ ます 。 

HTML の <meta> で も 自動 的 に ペー ジ を ロー 0 こと が 可能 で す が 、 そ の 場合 に は 回 
線 状 態 に よっ て 表示 が 遅く な り 、 ペ ー ジ が 完全 に ロー ド さ れる 前 に 次 の ペー ジ が ロー 
ド さ れ て し まう こと が あり ます 。 Son ペー ジ が 完全 に 読み 込ま れ 
る まで イベ ント が 発生 し ませ ん の で 、 そ の よう な 間 題 は 回 避 で きま す 。 


ETTU 間 ILF_oQo ュ ドー トー 





<body onLoad="setTimeout ( 'NEXT1 ( ) ', 10000 ) "> 

* ページ の ロー ド が 完了 し て か ら 次 の ペー ジ を ロー ド す る <p> 

ペー ジ の ロー ド が 終っ て か ら 10 秒 後 に 別 の ペー ジ へ 移り ます . . . 。<p> 

<1mg src="robot . Jpg" a1t="robot. Jpg" widht="474" height="198"> 
</body> 


三 = <Script ype="tex 上 /]avascr1pt"> 
『ー コ で 
PH Function NEXT1 ( ) { 1ocation.href = "htEp://www.shuwasystem.co.Jp/" } 
情 。 //--> 
報 く / SCr1D キ > 
害 ee 
用 
す 
る 


(⑳2 setTimeout): 「window オ ブ ジ ェクト 」 の 「 ス テー タス 行 に 文字 を 流す 」(P.362) 








リ B 生 】 


JavaScript 対 応 ペー ジ と 未 対応 ペー ジ を 振り 分 ける 


1ocation.href [プロ パテ ィ ] 





/77e7ox 


ミ 
還 
國 


ーー ーー 
Im Tm 
mm に J 
に 】 に 】 


Before 


After 


cir5amplesyjsWpipavigatorypBlecetonY04Ymdexhtml 太 | 阿 
アル の 林 ) 表示 お 気 に 和 0 ウーMOD へ 


の 四 全 の 中 殊 5mO9 


に コ 
に | 
し] 


CYSsmplcswjsWpin 


アイ MD D 表示 お 知 に 入 0⑳ ウーMD へ 2 ル / 
〇 ま ・ の 還 還 人 の の wm 宏 smc2 


・JavaScript 対 応 の ペー ジ 







っ 】 
に こ コ 








ET 大 OperaZ 


Q 〇 の 還る の 吉 5mcA 
*・JavaScript 未 対応 の ペー ジ 


回 E 
に 


Opera6 





Sa ね / 


放 5-mac 
放 4-mac 





サン プル で は 、 ペ ー ジ の ロー ド 時 に 、 JavaScript に 反応 する プラ ウザ は 「location.href」 を 
理解 し て 「js.htmll の ペー ジ を 、 JavaScript に 反応 し な い プ ラウ ザ は HTML の <meta> で 
JavaScript 未 対応 用 の ペー ジ を それ ぞ れ ロー ド し 、JavaScript に も <meta> に も 反応 し な 
い プ ラウ ザ に は 、 リ ンク を 設定 し て ペー ジ の 振り 分 け を 行っ て いま す 。 
実際 に 試す 場合 に は 、 こ の 他 に も 「js.html」「nojs.htmll の ふた つの HTML ファ イル を 用 
意 し て くだ さい 。 


EE 揚 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 

<htm1><head> 

<meta http-equiv="refFresh "content=" 5 :ur]1=no]S .htm1 "> 
て 中略 て 

<Script type="text/]avaScr1pt"> 

に ルー 

Function go]s( ) { 1ocation.href = "]s.htm1" } 

7 ん ーー の 

</ Script> 

中略 一 

<8Cript type="text/ avaSCript 上 "> 

(S 民 ユー 

go]8 ( ) 

// ら ミッ 

</ SCr1Dp セ > 

</body></htm1> 


の l 通 岩層 半生 dn 


(⑳ <meta> :「 基 本 的 な 内 容 」 の 「 自 動 的 に ペー ジ を 読み 込む 」(P.25) 








Ope/a/ 
Ope/a6 


圧 5-ma 
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412 oston オ プ ジ ェクト 





JavaScript 


各 ブ ラウ ザ 専 用 ペー ジ に 振り 分 ける 


[プロ バ パティ ] 


Before 


ヨ C-Y5amplesYjeypin 












* 各 ブラ ウザ 専用 ペー ジ に 振り 分 ける 


ブラ ウザ 判別 中 









委 IF6 - M 1 xp に 


アル ⑧ ーー ET ッ ー ル CD AM2 『 コ 
の @ ま の 回 還 の の 宮 5m2p 


・Internet Explorer 6.X 用 の ペー ジ 










ファイ ル (P) 編 業 ) 表示 移動 ⑬ ブッ クマ ー2⑧) ツー ル MD へ 2⑪⑩ E 
和 を - ゆ -@G の omo 
・Firefox 用 の ペー ジ 






サン プル で は 、 ま ず プ ラウ ザ 名 の 1 番 始 め の 文 字 を 検索 し て 、 そ れ を 元 に Netscape 
Navigator、Safari、Firefox、Mozilla と 、Internet Explorer、Opera を 振り 分 る 処理 を 行っ 
て いま す 。 そ し て 次 に 、 バ ー ジ ョ ン の 1 番 始め の 文字 ユー ザー エー ジェ ント 内 に 含ま 
れる 文字 を 検索 し 、Netscape Navigator、Intemet Explorer の 各 バ ー ジ ョ ン と 、Mozilla、 
Safari、Firefox、Opera を 判断 し 、href プロ パテ ィ を 使っ て 、 そ れ ぞ れ の プラ ウザ 専用 
ペー ジ へ の 振り 分 け を 行っ て いま す 。 

Intemet Explorer 3.X は 、 バ パー ジョ ン と し て 「2.0] を 返す も の が ある の で 、 そ の 点 も 考 識 
し て いま す 。 ま た 、Imternet Explorer 4.X 以外 に も 、S.X や 6.X、Opera は 、 バ ー ジ ョ ン 
と し て 「4.0」 を 返す の で 、 バ ー ジ ョ ン 情 報 の 中 か ら 「MSIE 5」「MSIE 6]、 ユ ー ザ エー ジェ 
ント 情報 か ら 「Operal と いう 文字 列 を 検索 し て 振り 分 け て いま す 。 

Netscape 6.X や 7.X、Mozilla、 Safari、 Firefox は 、 現在 バー ジョ ン と し て [5.0」 を 返す の で 、 
ユー ザ エ ー ジ ェ ン ト 内 に 含ま れる 文字 列 を 検索 し て 判断 を 行っ て いま す 。 


章 ee 


<SCript type="text/ avaSCr1pt"> 
ゆっ ニュ 
Function GoPege() { 
if ( navigator . appName . charAt (0)=="N" )【{ 

if (navigator .appVersion . charAt ( 0 ) ==2 ) { 1ocation.href = "NN2 
-htm1" } al 
1f (navigaor . appVersion . CharA ( 0 ) ==3 ) { 1ocation.href = "NN3 
-htm1" } 

1f (navigator . appVersion . CharAt ( 0 ) ==4 ) { 1ocation.href = "NN4 
ah 六 


を た) を っ 








1f (navigator . appVersion . CharAt ( 0 ) ==5 ) {【 
if (navigator .userAgenrt . indexOf ( "Netscape6/") != -1){ 1 
ocation.href = "NN6.htm1" } 』 
else { 
if (navigator .userAgent . indexOf ( "Netscape/7") != -1 
) ( 1ocation.href = "NN7.htm1" } 4 
else { 
if (navigator .userAgent . indexOf ("Safari") != -1 
) { 1ocation.href = "Safari.htm1" } 4 
else { 
if (navigator .userAgent . indexOf ( "Firefox" ) 
!= -1){( 1ocation.href = "Firefox.htm1"' } 4 
else { 1ocation.hrefF = "Mozi11a.htm1" } 
} 


} 
} 
if( navigator . appName . charAt ( 0 ) =="M" ){ 
if (navigator . appVersion . CharAt ( 0 ) ==2 ) { 1ocation.hreE "TE3 . 


htm1" } 4 
< 


1f (navigator .appVers1on . CharAt ( 0 ) ==3 ) { 1ocation.href = "TE3. 


htm1' } 
if (navigator .appVersion . charAt (0 ) ==4 ) { 
if (navigator .userAgent . indexOf ( "Opera" ) != -1){ の 
on.href = "Opera.hEm1" } 
else { 
if (navigator .appVersion . indexOf ( "MSTE 6") != -1)({ 骨 
1ocation.href = "TE6.htm1" } 
else { 
ifF (navigator . appVersion . indexOf ("MSTE 5") != 
-1 ) { 1ocation.href = "TE5.htm1" } | 


else { 1ocation.href = "TE4.htm1' } 
} 


} 

} 
//--> 
</ SCr1pt> 

中略 
<SCript type="text/]avascr1pt"> 
りー ニー 
GoPege( ) 
が ーー の 
</ Script> 





































OperaZ 


)pera6 


Sa ね / 
リネ 前 
左 4-ma 





Sa ね // 
圧 5-mac 


の * ト 胃 当 座 差 病 ]dn 上 l 


remn オ ラジ シェ クト 





アン カー を 設定 する 


onVrouseOver=" ス クリ ブ ト / 周 数 " [イベ ント ハン ドラ ] 
1ocation.hash [プロ パテ ィ ] 


Before After 
CYSamplesYjs\U1navieator\DBlocation\06Yimdex html 白 区 | 國 3 c Ysompcsyjsypinavicatory08localonwp6yingex html- 司 | 回 | 


アイ ル () 証 集 ) 表示 お 気 に 入 D⑯ ウー- ル D へ 2 ゆ [ コ アイ ル ) 編集 GE) 表示 ⑦ お 気に入り ⑳ ツー ル ⑪D へ ル 2⑪ [ コ 
GE の ・ 回 遇 の の Pmco OS の 回 加 人 の の 才 mo 


ォ ア ンカ ー を 設定 する 5 


この 文字 の 上 に マウ スポ イン タ を 乗せ る と 








サン プル で は 、 リ ンク の 上 に マウ スポ イン タ が 乗っ た 時 、 関 数 「LinkMo4(#Go)」 が 発生 
し て [locaton.hash」 に [#Go」 の 値 が 渡さ れ 、 ア ンカ ー で 指定 され た 場所 に ジャ ンプ し ます 。 
Windows 版 の ブラ ウザ で は 、 ス クロ ー ル バー が 出 て いる 範囲 で し か ペー ジ が 動き ませ ん 。 
サン プル で は 、 移 動 す る 範囲 を 広げ る た め 、 ダ ミー と し て <br> タグ を 入れ て いま す 。 ま 
た 、Netscape 6.X 以降 で は 、 こ の スク リプ ト は 正常 に 動作 し ませ ん 。 


ET 


<SCript type="text/]avascript"> 
か こ ご 
function LinkMo4 (go) { 1ocation.hash = go } 
が ニー シ 
< く / SCr1D セ > 

中略 
<body> 
* アン カー を 設定 する <pP> 
<a href="061oo.htm1" onMouseOver="LinjkMo4 ( "#Go') "> ご の 文字 の 上 に マウ ス 
ポイ ンタ を 乗せ る と . . .</a> 4 
<h エ > 
< く Dr><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ >< わ エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D 
と ppppppprb pp ep | 
く D エ ><b エ >< わ エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ > 
< く h エ > 
<a name="#Go"> ここ に 来 ま す ! !</a> 
く D エ ><D エ >< わ エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ > くわ エ ><D エ ><D エ ><b エ ><D エ ><D エ ><Db 
エ > く jD エ ><D エ >< わ エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><b エ ><D エ > 
く D エ ><b エ >< わ エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><b エ ><D エ ><D エ ><D エ ><D エ ><D エ ><Db 
エ > く ID エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ > 
く D エ ><D エ ><D エ ><D エ ><D エ >< わ エ >< わ エ ><D エ > くわ エ ><D エ ><D エ ><D エ ><D エ ><D エ ><b エ ><D エ ><D 
エ ><D エ > く <D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><b エ > 
</ body> 








1ocation.reload() [メソ ッ ド ] 
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に コ 
ト こ 
ら 
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Reed K 【 の リコ と リ 4 


Opeya6 


トコ 
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Sa7g7/ 
圧 5-ac 
/ た 4-mac 


プラ ウザ の [更新 (Reload)] ボ タン と 同じ 働き を する スク リプ ト で す 。 
ボタ ン が クリ ッ ク さ れ た タイ ミン グ で [reload0」 メ ソ ッ ド が 呼ば れ 、 ペ ー ジ を リロ ー ド 


し ます 。 


JavaScript1.1 で 追加 され た メソ ッ ド で す 。 


ETIU 呈 ーー ーー 


<fForm> 


<1input type="button" value=" Reload " onC1ick="1ocation.re1oad ( ) "> 


</ Eorm> 


三 ー 
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妨 re7ox 


MozMa_ 
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Ope/a/ 
Opera6 


Sa7a// 





話 5-mac 
克 4-mac 
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元 の ペー ジ へ 戻れ な いよ うに する 





[メソ ッ ド ] 







Before 









CYSamplesyjsWD1navieetorY0BlocationY0BYimdexhtml. 局 


カイル) 編集 (D 表示 ) お 気 に 入 0⑳ ウー ル D AM プ ⑯ 
G・ の 回 加 の の wm 吉 Pmoo 


* 元 の ペー ジ へ 戻れ ね いよ うに する 


中 選 







After 
計 http //Wwm shuwasystem co.jp - 数 式 会 社 秀和 


アイル 上 編集 お 気 に 和 0 ウー ル ⑪ へ A ル 2⑬ 


@ 呈 の 回 還 人 の の 安 am 






UADLE4LI 間 国 | 


AM プ ⑪ 


到 の ・ 回 の の we 安 5moo 





Ireplace0」 メ ソ ッ ド は 、 現 在 表示 され て いる URL を 「0」 内 で 指定 し た URL に 置き 換え 
ES 

し た が っ て 、 元 の ペー ジ の URL が 来歴 上 に 残り ませ ん の で 、[ 戻 る (Back) ] ボ タン を 
使っ て 元 の ペー ジ へ 戻っ て 来る こと が で き な く な り ま す 。 

JavaScriptl.1 で 追加 され た メソ ッ ド で す 。 


ET 間 呈 LT 


< く form> 

<1nput type="button" value=" Bye!! " onC1ick="window . 1ooation .rep1 
acCe ( 'http: / /www . 8huwasystem.Co. Jp/ ! ) "> 骨 
</ orm> 


416 octon オ ブ ジ ェクト 


LE6.0 。 
リン ク の URL の 情報 を 表示 する 
document.1inlks[ イン デック ス ].href [プロ パテ ィ ] アル 
document.1inliks[ イン デック ス ].protoco1l [プロ バテ ィ ] 
document.1inltks[ イン デック ス ].hostname [プロ バテ ィ ] | Moza 
document.1intks[ イ ン デ ックス ].pathname [ブロ バテ ィ ] 
document.1inlks[ イン デック ス ].port [プロ バテ ィ ] 7 あ ? 
document.linlks[ イ ン デ ックス ].host [プロパ ティ ] LA4o。 
document.linlks[ イ ン デック ス ].5earch [プロ パテ ィ ] 
document.liniks[ イ ン デ ックス ].target [プロ バ パティ] 
Opeya6 


当 C:\Samples\js\01naviator\09link_anchor\01\index.h. 司 | 間 | 区 Sa ね // 
アイ ル (編集 E) 表示 お 気 に 和 AD⑯ ツー- ル ①D ん M プ ⑪ 【 】 店 9-mac 


mm・⑨- 較 全球 実 5%9 /E-mac 
ォ リ ンク の URL の 情報 を 表示 する 1 
和 ン ステ ム の ホー ムペ ー ジ 


URL: http://www shuwasystem.cojp/index html 
ブロ トコ ル : http 

ホス ト 名 :wwwshuwasystem.cojjp 

パス 名 :indexhtml 

コミ ュ ニ ケー ショ ン ボ ー ト 番号 :80 

ホス ト 名 ・ ボ ー ト 番号 :wwwwshuwasystem.co.jp30 
? 以 降 の 文字 : 

ター ゲッ トウ ィ ン ド ウ :_Open 





Link オプ ジェ クト は 、 ペ ー ジ 上 の リン ク の 0 か ら 始 まる 配列 を 作成 し 、 そ の 中 に は 各 
リン ク の 情報 が 格納 され て いま す 。 

サン プル で は 、 リ ンク が ひと つ し か な い の で 、 そ の リン ク は [document.links[0]」 で 参照 
で きま す 。 も し も 複数 の リン ク が 存在 する 場合 は 、 イ ン デ ックス の 部 分 が 上 か ら [0O]・ 
[1]・[21… と な り ま す 。 

「hrefl プ ロ パ ティ は URL 全体 の 値 を 、「protocoll プ ロ パ ティ は URL 内 の http や fp な ど 
の プロ トコ ル 部 分 の 値 を 、「hostname」 プ ロ パ ティ は URL 内 の ホス ト 名 部 分 の 値 を 、 
「pathname」 プロ パテ ィ は URL 内 の パス 名 部 分 の 値 を 、「port] プ ロ パ ティ は URL 内 
の :8080 な どの ポー ト 番 号 の 値 を 、「hostl プ ロ パ ティ は ホス ト 名 と ポー ト 番 号 部 分 の 値 
を 、「searchl プ ロ パ ティ は ? で 始ま る 問い 合わ せ 文 字 列 を 、「tarsell プ ロ パ ティ は target 
属性 を 、 そ れ ぞ れ 持 っ て いま す 。 

Link オプ ジェ クト に は 、 こ れ 以 外 に も 「hash]」 プ ロ パ ティ (アン カー) が あり ます 。 
これ ら の プロ パテ ィ は 読み 出し 専用 で す 。 


の et 骨 崇 自 基 一 せ ど ざ や ・ ざ ざこ 人 


トコ 
さ 





凍っ 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta http-equ1v="Conten-Socript-Type" conten 上 =" て ex 上 /avascr1ipt"> 
<meta http-equiv="ConEent-Sty1e-Type" content="text/css"> 

< 上 1 上 1e></ 上 上]1e> 


<style type="Etext/css"> 

に マル コー 

body { background-co1or: #EFFFFF: } 
ーー> 

</ sty1e> 


</head> 」 
<body> 

* リ ンク の URL の 情報 を 表示 する 

く D> 

<a href="htEp: / /Www . ShuwasysEem . Co . Jp/index .htm1" target="_Open 

"> 秀和 シス テム の ホー ムペ ー ジ . . .</a> 同 

く /p> 

く D> 


<SCript type="text/]avascr1pt"> 

く ! ニー 

document .write( "URL :",document .1inks [0] .href ) : 

document .write( "<br>" ) : 

document .write(" プ ロト コル :" ,qocument .1nkg[0] .protoco1 ) : 

document .write ("<br>" ) : 

document .write ("ホス ト 名 :" ,document .1inkg[0] .hostname) : 

document .write( "<br>" ) : 

document .write ("パス 名 :", document .1injkg[0] .pathname) : 

document .write ("<br>" ) : 

document .write(" コ ミュニケーション ボー ト 番 号 :" , document .1inks[0] .port) : 
document .write( "<br>" ) : 

document .write(" ホ スト 名 ・ ポ ー ト 番号 :" , daocument .1inks[0] .host) , 
document .write( "<br>" ) : 

document .write("? 以 降 の 文字 :" , document .11nkg[0] .search) : 

documen . write ( "<br>" ) : 


document .write ("ター ゲッ トウ ィ ン ド ウ :", document . 1inks[0] .target) : 1 
//-- テ > 

</ Script 上 > 

</p> 『 
</body> 


</htm1> 


リン ク の 上 に ポイ ンタ が 乗る と ウィ ンド ウ を 開く 


onMVIouseOver=" ス クリ プ ブ ト / 疫 数 " [イベ ント ハン ドラ ] 


GO After 
当 c:*Samples\js\01nayieator\09lnk_anchor\02\mdexh.. 司 | 占 | INk sAMPLE - Microsoft mt 全品 区 


アイル) 編集 ⑥ お 気 に 和 D(⑯ ル ①。 へ ヘルプ ⑪ 

GO ・⑨ 回国 の の 球 実 5m29 ウィ ンド ウ が 開き ます の べ 。 
ォ リン ク の 上 に ボイン タ が 乗る と ウィ ンド ウ を 開く 
この 文字 の 上 に マウ スポ イン タ を 乗せ る と 





JavaScript で は 、 リ ンク の 中 に イベ ント ハン ドラ を 組み 込む こと が で きま す 。 
サン プル で は 、 リ ンク の 中 に イベ ント ハン ドラ 「onMouseOver」 を 組み 込み 、 マ ウス カー 
ソル が リン ク の 上 に 乗っ た 時 に 、 新 し い ウ ィ ン ド ウ が 開く よう に し て いま す 。 


EE 舞 ia 


<Script type="text/ avaScr1pt"> 
ぐーー 
function LinkMo1 ( ) { 
Var LM1: 
LM1=window .open ("" , "DocWin1" , "too1bar=no , 1ocation=mo , direCtOr+1 
eg=no , w1dth=300 ,height=250" ) : 4 
LM1 .document .write ( "<htm1><head><t 上 it]e>LTNK_SAMPLE</it]e>" ) : 
LM1 .document .write ( "</head>" ) : 
LM1 .document .write( "<body>" ) : 
LM1 .document .write ("<br>" ) : 
LM1 .document .write ("ウィ ンド ウ が 開き ます (^_^) 。 ") 
LM1 .document .write( "<hr>" ) : 
LM1 .document .write ("<fForm>" ) : 
LM1 .document .write ( "<input type='button' name= 'Wc11' value=! 
C1ose ' onClick= 'window .c1ose( ) ">" ) : 過 
LM1 .document .write ( "</form>" ) : 
LM1 .document .write( "</body>" ) 
LM1 .document .write( "</htm1>") : 
LM1 .document .c1ose() : 
} 
//--> 
< く / SCr1pt> 
中略 
<p><a href="#" onMouseOver="LinkMo1 ( ) "> この 文字 の 上 に マウ スポ イン タ を 乗せ る 
と ...</a></p> 4 








に 
hJ 
M 
に 】 


語 記 
Jl に 
ご 3 [ 


避 二 
こう Lul 
S 謀 た 

いこ 】 


Moz/a 


(リコン ア 4 
Opera6 


トコ 三 
Eo に J) 
に 3 に ] 


Sa ね 
在 5-mac 


た 4-mac 


リ 
ン 
y 
で 
1 
情 
幸 
を 
用 
す 
る 


reo オラ ジェ クト 419 


JavaScrint 


Before 





者 C:\Samples\js\01nayieator\09link_anchor\D3\imdex.h 


プア イル) 編集 表示 お 気 に 和 AD ツール AM プ ゆ 
GO の 回 国人 の の ee PAxo 


ォ リ ンク を ボタ ン の よう に 使う - 1 - 


この 文字 を 0 ッ ク す る と 












After 







委 LTNK SAMPLE - Microsoft mt 還 X 


EJC 





ウィ ンド ウ が 開き ます の 。 
元 ペ ー ジ も ロー ド し ませ ん 。 


圧 5-ma 
克 4-ac 








リン ク の URL を 指定 する 部 分 で 「javascript: 関 数 ] と 指定 する と 、 リ ンク を クリ ッ ク し た 
タイ ミン グ で 関数 を 発生 きせ る こと が で きま す 。 

サン プル で は 、 リ ンク を クリ ッ ク す る と 関数 「LinkMo20」 が 発生 し て 、 元 の ペー ジ は そ 
の まま で 新しい ウィ ンド ウ が 開き ます 。 


ET 所 還 


Var LM1: 


ー テ <!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
リ <html> 
の <head> 
ク <meta htp-equiv="ConEent-Script-Type" conEent="tex 上 / avaScr1pt 上 "> 
和 <meta http-equiv="ConEent-Style-Type" content="text/css"> 
< 上 1t 上 1e></ 上 11e> 
カ 
| <SCr1pt type="text/]avascr1pt"> 
情 で ニ ー 
加 Function LinkMo2 ( ) { 
利 
用 
す 
る 


LM1=window .open ( "" , "DocWin2" , "too1bar=no, 1ocation=no ,d1rector1i 
es=no , w1dEh=300 , height=250" ) : 4 
LM1 .document . write ( "<htm1><head>< 上 it 上 1e>LTNK _SAMPLE</ 上 1]e>" ) : 

LM1 .document .write( "</head>" ) : 


20 thk オラ ェクト 





LM1 .document .write ("<body>" ) : 

LM1 .document .write ("<br>") : 

TLM1 .document .write ("ウィ ンド ウ が 開き ます (^_^) 。") : 

LM1 .document .write ("<br>" ) : 

LM1 .document .write ( " 元 ペ ー ジ も ロー ド し ませ ん 。 ") : 

LM1 .document .write ( "<hr>" ) : 

LM1 .document .write( "<Eorm>" ) : 

LM1 .document .write ( "<1nput type='Dbutton' name= 'Wc12' value='" 
C1ose ' onC1ick='window.c1ose( ) '>" ) : 4 

LM1 .document .write( "</fForm>" ) : 

LM1 .document .write ("</body>" ) : 

LM1 .document .write ("</htm1>" ) : 

LM1 .document .c1ose( ) : 







Opera6 
//-- テ > 
</ Script> Sa ね // 


リュ 
<style type="text/css"> /E4-7 
<!ーー 
body { background-co1or: #EFFEfFf: } 
ーー テ 
</sty1e> 


</head> 

<body> 

ょ リン ク を ボタ ン の よう に 使う - 1 - 
<p> 

<a href="javasortpt :LinkMo2 ( ) "> この 文字 を クリ ッ ク す る と . . .</a> 
く /p> 
</body> 
</htm1> 
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リピ ンマ と ジス ソ だ た と 】 | レン エラ 代 


onClick=" スクリプト / 尊 数 " [イベ ント ハン ドラ ] 
return false 









ESOYd 
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* リ ンク を ボタ ン の よう に 使う - 2 - 


この 文字 を の ッ ク す る と 
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ウィ ンド ウ が 開き ます パ 。 
元 ペ ー ジ も ロー ド し ませ ん 。 







リン ク 上 で 「onClick」 を 使用 し た 場合 リンク を クリ ッ ク し た 時 に 関数 が 発生 する の と 
同時 に 、 リ ンク の 動作 も 発生 し て し まい ます 。 し か し 、 JavaScript1.1 か ら は 、「retum 
false」 を 返す と 、 そ の 時 点 で 関数 の 処理 と リン ク の 動作 を 中 止 で きる よう に な り ま し た 。 
サン プル で は 、 リ ンク が クリ ッ ク さ れる と 関数 [LinkMo4()」 が 評価 きれ て 、 ウ ィ ン ド ウ 
を 開く 処理 を 行い ます 。 そ の 人 後 、「retum false」 で イベ ント の 処理 を 中 止 する の と 同時 に 、 
リン ク の 動作 も 中 止 す る よう に し て いる の で 、 他 の リン ク へ 飛ぶ 動作 は 発生 し ませ ん 。 


| So 


<!DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm1> 

<head> 

<meta http-equiv="ConEent-Scr1pt-Type" content="Eex 上 / avascr1pt"> 
<meta htEp-equiv="ConEent-Style-Type" content="Eext/css"> 

< 上 1 上 1e></ 上 1 ュ 上 1e> 

<8SCrip type=" て ex 上 /]avaSCr1p ヒ "> 





ぶり ニー 
function LinkMo3 ( ) { 

Var LM1: 

LM1=window . open ( "" , "DocWin3" , "too1bar=no , 1ocation=no , directori 
es=no , w1dth=300 , height=250" ) : 4 


2 unenem オ プシ ェ クト 


TLM1 .document .wrie ( "</head>< 上 1 上 ]e>LTNK _ SAMPLE</t 上 1]e>" ) : 
TLM1 .document .write ( "</head>" ) : 
LM1 .document .write ("<body>" ) : 
LM1 .document .write ( "<br>" ) : 
LM1 .document .write ("ウィ ンド ウ が 開き ます (^_^) 。") : 
LM1 .document .write( "<br>" ) : 
LM1 .document .write( " 元 ペ ー ジ も ロー ド し ませ ん 。 ") : 
LM1 .document .write ("<hr>" ) : 
LM1 .document .write ("<Form>" ) : 
LM1 .document .write ( "<input type='button' name= 'Wc13' value=' 1 
C1ose ' onC1ickk= "window.c1ose( ) !>") : 
LM1 .document .write ("</Form>" ) : 
LM1 .document .write ("</body>" ) : 
LM1 .document .write( "</htm]>" ) : 
LM1 .document .c1ose() : 
return Fa1se: 








OperaZ 
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Sa ね / 
圧 5-mac 
左 4-mac 


} 

コシ 

< く / SCr1D> 

<sty1e type="text/css"> 

に Ha 

body { background-co]1or: #FFFFFF: } 
ーー テ > 

</sty]e> 

</head> 

<body> 

* リ ンク を ポタ ン の よう に 使う - 2 - 

<D> 

<a href="#" onC1ick="return LinkMo3 ( ) "> この 文字 を クリ ッ ク す る と . . .</a> 
< く /Dp> 

</body> 

</htm1> 


リン ク で イベ ント ハン ドラ を 使用 する 時 の 注意 

リン ク 上 で 「onClickl な どの イベ ント ハン ドラ を 使う 時 に は 、 必 ず リ ンク の 指定 
を し て くだ さい 。 

リン ク の 指定 が され て いな い 時 に リン ク が クリ ッ ク さ れる と 、 サ ー バ ー の 設定 に 
よっ て は 、 そ の HTML ファ イル が 納め られ て いる ディ レク トリ の 一 覧 が 表示 され て 
し まう よう な 場合 も わり ます 。 


Netscape Navigator 3.0 以 上 で は 、「return false」 を 使え ば 問題 は 解消 され 
ます が 、 そ の 他 の ブラ ウザ で は return false」 は 無視 され ます 。 

も し も 、 リ ンク を ボタ ン の よう に 使い 、 ク リッ ク し て も 他 の ペー ジ へ 飛び た く な 
いよ うな 時 に は 、<a href='#'"> と いっ た よう に 、 リ ンク に [「 提 を 設定 する と よい で 
し よう 。 








<input type="radio" name= "radio オブ ジェ クト 名 " value=" 値 
rr イベ ント ハン だ ラ > 
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編集 E) 表示 お 気 に 入 DQ⑭) ツ ^2⑪ [3 
の ・ の 国 還 人 の の 支 5xoo 


ォ ラ ジオ ボタ ダン を リン ク に 使う 
Opera/ 


LA4e | 


Sa ね / 


Opera6 


放 5-ma 
/E4-mac 


〇 フレ ー ム を 抜け る 





TI 
ウ @ ツウ - ル D へ ル 2⑪ 


@・ の 回 国人 る の 
・3 ペ ー ジ 目 .… 


委 CYSamplcswjs\01n 


アイ ル (P 編集 D 表 : お 気 に 入 D⑯ ツー- ル D へ M プ ⑪ 


O 〇 の 因 引 の の ws 誤 5Roo 











〇 フレ ー ム を 抜け る 









〇 フレ ー ム を 抜け る 





サン プル で は 、 ラ ジオ ボタ ン に イベ ント ハン ドラ 「onClick」 を 設定 する こと に より 、 ラ 
ジオ ボタ ン が クリ ッ ク さ れる と 関数 が 発生 し 、URL が 引き 渡さ れ て 、 フ レー ム 名 [12] 
に ペー ジ が ロー ド さ れ ま す 。 

location オプ ジェ クト の 「href] プ ロ パ ティ を 使っ て フレ ー ム に ペー ジ を 読み 込む 場合 、 フ 
レー ム を 抜け て ペー ジ を 表示 する に は 、 サ ンプ ル の よう に 「parenttop.location.href=URL] 
と 、「top]」 プ ロ パ ティ を 指定 し ます 。 

実際 に 試す 場合 に は 、 こ の 他 に も 「f2.htmll「pagel.html」-「page3.htmll「top.html」 の 
$ つ の HTML ファ イル を 用 意 し て くだ さい 。 


4 rem ォ ラクト 


の t 革 落 時 トー 上 


ee 


【 フ レー ムウ ィ ン ド ウ 】 

<frameset col1s="180,* リ "> 
<fFrame sro="fF1 .htm1" 
<fFrame src="F2 .htm1" 

</ Framese ヒ > 

<noframe8> 


name="1 "> 
name="F2"> 


フレ ー ム 機能 を 使用 し て いま す 。 フレ ー ム 対応 の ブラ ウザ で 試し て くだ さい (^_^) 。 


</noframe8> 


【f1.html】 


<SCript type="Eext/]avasCr1pt"> 


SS ル こ 


function P1 (w1) { parent.f2.1ocation.href=w1 } 
function TP(w2) { parent .top.1ocation .href=w2 } 


//--> 
</ BCr1p キ > 
< 中 星 
</head> 
<body> 
<fForm> 
く D> 
<1nput type="radio" name= 
se) ">)" checjkked>Top へ 
< く /p> 
<D> 
<input type="radio" name= 
se) ">m1' ) ">1 ペー ジ 目 
< く /p> 
<D> 
<input type="radio" name= 
se) ">m1') ">2 ペー ジ 目 
< く /p> 
く D> 
<input type="radio" name= 
se) ">m1* ) ">3 ペー ジ 目 
< く /p> 
く D> 
<1nput type="radio" name= 
se) ">") "> フレ ー ム を 抜け る 
く /p> 
</ form></body> 
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<input type="button'" name= "pg 太 on ブ ブ ジ ェクト 名 " Value=" 値 " 
イベ ント ハン だ ラ > 


Before 


* ボ タン を リン ク に 使う 
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フレ ー ム を 坊 け る 
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サン プル で は 、 ボ タン に イベ ント ハン ドラ 「onClick」 を 設定 する こと に より 、 ボ タン が 
クリ ッ ク さ れる と 関数 が 発生 し 、URL が 引き 渡さ きれ て 、 フ レー ム 名 [fl] に ペー ジ が ロー 
ド さ れ ま す 。 

window オプ ジェ クト の 「open()」 メ ソ ッ ド を 使っ て フレ ー ム に ペー ジ を 読み 込む 場合 、 
フレ ー ム を 抜け て ペー ジ を 表示 する に は 、 サ ンプ ル の よう に 「window.open(URL." top")] 
と 、 ウ ィ ン ド ウ 名 に 「_top」 を 指定 し ます 。 

実際 に 試す 場合 に は 、 こ の 他 に も 「fI.htmlllpagel.htmll-「page3.html ltop.htmll の 5$ つ 
の HTML ファ イル を 用 意 し て くだ さい 。 
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語 輸 ーー 


【 フ レー ムウ ィ ン ド ウ 】 
< く !DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTML 4.01 Frameset//EN" > 
<htm1><head> 
< 上 1 上 1e></ 上 1 上 1e> 
</head> 
<fFrameset rows="*,100"> 
<frame Src="F1 .htm1" name="F1"> 
<frame Src="F2 .htm1" name="F2"> 
</ Framese> 
<noframes> 
フレ ー ム 機能 を 使用 し て いま す 。 フ レー ム 対 応 の ブラ ウザ で 試し て くだ さい (^_^) 。 
</nofFrameg> 
</htm1> 


【f2.html】 
<!DOCTYPE HTMIL, PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1><head> 
<meta http-equ1 マ ="Content-Script-Type" content="text/]avascript"> 
<meta htEp-equiv="ConEent-Styl1e-Type" content="text/css"> 
< 上 1 上]e></ 上 it]1e> 
<8Cript ype="Eext/]avaSCr1pt"> 
で ポ ーー 
function P1 (w1) { window.open (w1 , "E1") } 
function TP(w2) { window.open(w2,"_top") } 
が の こっ か 
< く / Cr1p キ > 
一 中略 一 

</head><body> 
<fForm> 

<1nput type="jbutton" name= "FBGo1" value=" Top へ " onC1iok="P1 
("1 .htm1') "> 

<1nput type="button" name= "FBGo2" ya1ue=" 1 ペー ジ 目 " onC1ick= 
PB1( 'page1 .htm1! ) "> 

<1nput type="button" name= "FBGo3" va1lue=" 2 ペー ジ 目 " onC1ick= 
rP1 ( 'page2 .htm1' ) "> 

<1nput type="button" name= "FBGo4" ya1ue=" 3 ペー ジ 目 " onC1ick= 
PB1 ( 'page3 .htm1') "> 

<input type="button" name= "FBGo4" va1ue=" フレ ー ム を 抜け る " onC1 
ick="TP('top.htm1' ) "> 
</ Form> 
</body></htm1> 
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JavaScript 


メニ ュー を リン ク に 使う 


<select name="seJect ブ ブ ジ ェクト た 名 " イベ ント ハン ドラ > 


<option> 文字 
フォ ー ム ガブ ジェ クト 名 . セ レク トブ ジェ クト 名 .selectedTndex 
onChange=" ス クリ ブ ト / 層 数 " [イベ ント ハン ドラ ] 


* メ ニュ ー を リン ク に 使う 

















当 C YSamplesWjeyD1naviator\10formWD2Wjndexhtml 


アイ ル (P) 編集 表示 お 気 に 和 0 ツー ル ①D へ ルフ a 
OR の 回 引 の の we 雄 smoo 





D3\mdex html 


アイ ル P) 編集 表示 ⑰ ⑳ ウー- ル OD AI 


OR の 引 人 の の we 衣 iwoo 


cy 10formW03| 
イル) 編集 CD 表示 お気 に 和 D@ ル D AM プ ⑪ 


OR の 引 人 の の wm 衣 Pmoo 


サン プル で は 、 フ ォ ー ム の 内 容 に 変化 が あっ た 時 の イベ ント を 取得 し て 処理 を 発生 す 
る イベ ント ハン ドラ 「onChange」 に よっ て 、 メ ニュ ー の オプ ショ ン が 変更 され た 時 に 、 


関数 FC)」 の 処 





ま が 発 生 し ます 。 


JavaScript は 、 自 動 的 に 0 か ら 始ま る オプ ショ ン の 配列 を 作成 し て いる の で 、 ど の オォ オプ 
ショ ン が 選ば れ た か は 、 そ れ で 参照 する こと が で きま す 。 具体 的 に は 、「WO.FSGo. 
selectedIndex ==0」| は 、 セ レク ト 名 [FSGol」 の イン デック ス 1 番 目 、 つ まり 「<option> Top 
へ 」 を 指し ます 。 こ の 値 が 真 (True) の 時 は 、 そ こ で 指定 し て いる URL「fl.htmll が フレ ー 
ム 「fi」 に 読み 込ま れ ま す 。 

実際 に 試す 場合 に は 、 こ の 他 に も 「fIl.htmlllpagel.htmll-「page3.htmll「top.htmll の 5 つ 
の HTML ファ イル を 用 意 し て くだ さい 。 


ETT0LL_V_VV WW 


【 フ レー ムウ ィ ン 


ドウ 】 


<!DOCTYPE HTMTL, PUBLTC "-//W3C//DTD HTML, 4.01 Frameset//EN" > 


<htm1> 
<head> 


126 Fom オ フジ ェクト 





































<1 上 1e></ 上 1 に 1e> 
</head> 
<frameset rows="*,80"> 
<frame Src="F1 .htm1" name="F1"> 
<frame Src="F2 .htm1" name="F2"> 
</ Frameset> 
<noframe8> 
フレ ー ム 機能 を 使用 し て いま す 。 フレ ー ム 対応 の ブラ ウザ で 試し て くだ さい (^_^) 。 
</noframes> 
</htm1> 


【f2.htmll 
<SCrip type="text/javascript"> 
っ 
function FC(WO) { 
1F (WO.FSGo.se1ectedTndexx == 0) { paren.F1.1ocation.href = 
ELi 池 RU" 半 
1f (WO.FSGo.ge1ectedTndexx == 1) { parent.f1.1ocation.href 
ypage1 .htm1" } 
if (WO.FSGo.se1ectedrTndexr == 2) { parent.fF1.1ocation.href 
"page2 .htm1" } 
if (WO.FSGo.se1ectedrndexx == 3) ( parent.F1.1ocation .href 
ypage3 .htm1" } 
1fF (WO.FSGo.se1eotedTndexr == 4) { parent.top.1ocation.href = 
top .htm1" } 
} 
ん が ーー ニ ジ 
</ SCr1D キ > 
中略 一 
</head> 
<body> 
<form> 
<ge1ect names"F8Go" onChange="FC(this.Eorm) "> 
<option> top へ 
<option>1 ペー ジ 目 
<option>2 ペー ジ 目 
<option> 3 ページ 目 
<option> フレ ー ム を 抜け る 
</ se]1ect> 
</ form> 
</body> 
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フォ ー ム に 文字 を 流す 


<form name= "フォー ム オ ナブ ジェ クト 名 "> 
<input type= "text' name="eg# ブ ブ ジ ェクト 名"' size= ピク セル > 
document. フ ォ ー ム 名 . デ スト フ ォ ー ム 名 .value [プロ バテ ィ ] 






竹 C:\5amples\jsY01navigator\1Dform\04\imdexhtml 


アイ ル (F) 編集) 表示) お 気 に 和 D⑱ ツール D へ ヘルプ フ ⑪ 
@② 京 ・ の 6 図 国人 の ss 宏 smap 


ォ * フ ォ ー ム に 文字 を 流す 


















プア イル 編集 ⑤ 表示 に AO⑯ ウッ - ル CD AA プ ⑩ 
@・ の 回 還る の 誠 smO0 


* フ ォ ー ム に 文字 を 流す 















ここ に メッ セー ジ を 入れ ます 。 





呈 CyY5amplcsYjsW01navietorY10form\04Yindexhtml 


アイ ル ) 編集 表示 お 気に入り ⑯) ツウ - ル MD へ 2⑪ 
@・ の 回 還 人 ぬ の Ms 宮 5w29 


ォ * フ ォ ー ム に 文字 を 流す 







すす < 





サン プル で は 、 文 字 を スク ロー ル さ せる 部 分 は 、「window オプ ジェ クト 」 の 「 ス テー タ 
ス 行 に 文字 を 流す 」(P.364) と 同じ で す 。 

た だ し 、 文 字 を スク ロー ル さ せる の を 、 ス テー タス 行 で は な く フ ォ ー ム 内 の テキ スト 
欄 に する た め に 、|window.status」 と 指示 し て いた 部 分 が 「document.Fmess.fmess.valuc」 
と な っ て いま す 。 こ れ は 、document オプ ジェ クト 内 の 「Fmess」 と いう 名 前 の Form オプ 
ジェ クト に ある 「fmess]」 と いう 名 前 の text オ プ ジ ェ クト 名 の 値 で ある こと を 表し 、 そ こ 
に 文字 列 を 代入 し て いま す 。 

オブ ジェ クト の 階層 が 深く て 少々 や や こし く 感 じゃ か も し れ ま せん が 、 常 に オブ ジェ 
クト の 階層 関係 を 念頭 に 置い て スク リプ ト を 書く よう に すれ ば よい で し ょ う 。 





ーー 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<html> 

<head> 

<meta http-equ1V="Content-Script-Type" Content="Eex / avVaSc エ ipt"> 
<meta htEp-equ1v="ConEent-Style-Type" content="Etext/css"> 

< 上 i 上 1e></ 上 1 上 1e> 


<SCrip type="Eext/]avaSscr1pt "> 
光束 

var TC = 0 

var Fm1 = " 


UE 
/ 


var Em2 = "ここ ご に メッ セー ジ を 入れ ます . .. .  。 0 
Var Fm = Fm]+Fm2: 
function FMess() { 


3f (TC < 1000) { // こ この 数 値 を 変え る 事 に よっ て スク ロー ル す る 時 間 が 変わ り ます 


TC す ホキ ? 
document .Fmes5 .Fmes8.Yalue = Fm: 
Fm = Fm.substring(2,Fm.1ength) + 1 
(0,2): 
setTimeout ("FMess ( ) ",300): 
} 
else ( document.Fmes8g.Emesg.value = "" } 
) 
//--> 
</ SCr1p> 


<sty1e type="Eext/css"> 

る |)! ニニ 

body { background-co1or: #FFFFfF: } 
ーー> 


</ sty1e> 


</head> 

<body onLoad= "FMess ( ) "> 

* フォ ー ム に 文字 を 流す 

く D> 

<Eorm name="Fmes8"> 

<1nput type="text" name="Emess" 8TZE=50> 
</ form> 

く /p> 

</body> 

</html> 
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た 下 パ リ 。 に : オ エ エモ キセル っ) 
onChange=" スク リブ ト / 属 数 " [イベ ント ハン ドラ ] 





Before After 


委 CYSamplesYje\01navieatpr\10form\05Yindex html 


アイ ル ⑪) 編集 (D 表示 ) お 気に入り ⑯) ツー ル GD ヘル プ ⑪ 
の 回 回 合 の we 哀 Pmoo 


* ォ フォー ム の 内 容 変更 を チェ ッ ク す る 


良 CYSamplcsYjsw01nayiator\10form\05\imdexhtmi- 司 


ファ イル 編集) 表示 び ) お 気 に 和 AO ツ - ル ①D へ 7⑪ トコ 
=・ の 回 回 の の 支 5moo 


* フ ォ ー ム の 内 容 変 更 を チェ ッ ク す る 


に reedsnep 


estetester ne p 





サン プル で は 、 イ ベン ト ハ ンド ラ 「onChange」 を 使っ て 、 フ ォ ー ム の 内 容 に 変化 が あっ 
た か どう か を チェ ッ ク し て いま す 。 

も し も テキ スト エリ ア 内 の 値 が 変え られ た 場合 は 、、 フ ォ ー ム を 抜け る 時 に 「onChange」 
が 関数 を 発生 し 、 テ キス ト エ リア の 値 を 元 に 戻す か どう か を 確認 する ダイ アロ グ ボ ッ 
クス を 出す 処理 を 実行 し ます 。 


| Samplc 


<SCript tyDpe="Eext/]avascript"> 

SH 王 三 

function OC() { 
if ( confirm ("フォ ー ム の 内 容 が 変更 され まし た 。 元 に 戻し ます か ⑦) ) { 

document . OnC . onC .Va1uG = "** ネ メメ まま mnG.]D": 

} 

} 

ん ーー 

</ Scr1pt> 

<body> 

* フ ォ ー ム の 内 容 変更 を チェ ッ ク す る 


<form name="OnC"> 


<1nput type=" て ex 上 " name="OnC" Ya]1ue = "****G ォ ホネ ネネ me.]D" S1ze=30 | 
onChange="OC( ) "> 

</ form> 

</body> 


め <input type='text"> : 「 フ ォ ー ム 」 の 「1 行 の 入力 フィ ー ル ド を 作る 」(P.120) 
confirm() :「window オ ブ ジ ェクト 」 の 「 確 認 ボ タン 付き の ダイ アロ グ ボ ックス を 開く 」(P.334) 


42 mm オプ ジェ 2 ト 


と た gg パノム トル エキ セル 4 まつ) 


<forrm narmne=" フォ ー ム ガブ ジェ クト 名 " action=" 送信 先 " method= 
"DOS7" プ ベ ント バン だ ラ > 

<input type="checkbox' mame="cnecr の Dog ガブ ジェ クト 名 " 
Value=" 人 " イベ ント ハル ンド だ ラ > 

<input type='reset'" value=" 値 " プ ベ ント ハバ ルン だ ラ > 






ャ フォ ー ム の 内 容 を チェ ッ ク す る 





お 名 前 
(必ず 入力 し て くだ さい 


ブラ ウザ は 何 を お 使い で すか 
(必ず ひと つ 以 上 チェ ッ ク し て くだ さい 〉 
Nerscape 7X 

Netscape 6X 

Netscaps Navimtor 4 
Firsfsx<Mozils) 
itemet Erer 6x 
imemet Expprer 5X 
iremet Expbrer 4X 



















ナール を る. 








hs 」 








サン プル で は 、[ メ ー ル を 送る ] ボ タン が 押さ れ た 時 に 、 イ ベン ト ハ ンド ラ 「onSubmit」 
が 関数 の 処理 を 発生 し て 、 フ ォ ー ム 内 の チェ ッ ク を 行っ て いま す 。 

も し も その 時 に 、 名 前 を 書く 欄 に 何 も 記 入 さ れ て いな か っ た り 、 チ ェ ッ クボ ックス が 
ひと つも チェ ッ ク さ れ て いな い 場 合 は 、 和 警告 用 の ダイ アロ グ ボ ックス を 開き ます 。 
チェ ッ ク ボ ックス は 、1 番 始め に すべ て の チェ ッ ク ボ ックス に 「false ( 偽 ) 」 の 値 を 代入 
し 、 チ ェ ッ クボ ックス が クリ ッ ク さ れる 度 に その 反対 の 値 、「false ( 偽 )」 だ っ た ら 「rue 
( 真 )]、「rue( 真 )」 だ っ た ら 「false ( 偽 )] を 代入 する こと に より 判定 し て いま す 。 ま た 、 
[リセ ッ ト す る ] ボ タン が 押さ れ た 時 は 、 す べ て の チェ ッ ク ボ ックス に [false( 偽 ) 」 の 値 
が 代入 され る よう に し て いま す 。 

実際 に 試す 場合 に は 、 サ ンプ ル の 「****@****** ne.jp」 の 部 分 を 、 メ ー ル を 受け 取り た 
い メ ー ル アド レス に 変更 する か 、 デ ー タ を 受け 取る CGI サー バー を 設定 し て くだ さい 。 


ED 揚 E 


<8Cr1pt type="tex 上 /]avaScr1ipt"> 
で ルー ビ 

Var fF1=fa] se: 

var fF2=fa] se: 

Var f3=FfFa] se: 

var fF4=fa]se: 

Var fF5=fFa] se: 

var f6=false: 

var 7=fFa]se: 
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var F8=fFa]se: 
var 9=fFa]se: 
function Mcheck( ) { 
if (document .MATL.4 .Namae .Yalue=="") { 
window .a1ert ("名 前 を 入力 し て くだ さい ") : 
return False } 
3 RI 
==fFa]lseggF7==fFalseg&F8==fFa]sesgfF9==false) { 
window.alert ("チェック ボッ クス を 、 ど れ か ひと つ 以 上 チェ ッ ク し て くだ さい ") : 
return fa]se } 
return TUG: 
} 
Function Frest() 【 0 
=false:F7=false:F8=false:F9=false: } 
7 ニート 
< く / SC エ 1p セ > 
中略 
<Dbody> 
* フ ォ ー ム の 内 容 を チェ ッ ク す る <p> 
<Eorm name="MATL4" acC1On= "ma 上 〇 ュ * メ メメ メメ ネネ た 。nG。]D" 2 
" onSubmit="return Moheok( ) "> 
<b> お 名 前 : </b><1nput type="text" name="Namae" 090 
て くだ さい ) <br><p> 
<b> プラ ウザ は 何 を お 使い で すか </b><br> (必ず ひと つ 以 上 チェ ッ ク し て くだ さい ) <br> 
<1nput type="checkbox" name="NorE1" value="Netscape 7.XX" onC11ok= 阿 
"E1=!E1">NetsCape 7 .X<Dr> 
<input type="checkbox" name="NorE2" value="Netscape 6.X" onC1iok= al 
"E2=!E2">NetscCape 6 .X<Dr> 
<1input type="oheokbox" name="NorE3" value="Netsocape Navigator 4.X" 朋 
onC1ick="E3=!E3">Netscape Navigator 4 .X<br> 
<1nput type="checkbox" name="NorE4" value="Firefox" 0 
4">FirefFox (Mozi11a ) <b エ > 
<input type="checkbox" name="NorE5" yalue="Tnternet Explorer 6.X" 骨 
onC1iok="E5=!E5">TnEernet Exp1orer 6 .X<br> 
<1nput type="cheokbox" name="NorE6" value="Tnternet Exxplorer 5.X" 了 
onC1icfk="E6=!E6">Tnternet Exp]lorer 5 .X<br> 
<1input type="checkboxx" name="NorE7" va1lue=" エ nternet Exrp1orer 4.X" 折 
onC1icfk="E7=!E7">TnEerne Exp]orer 4 .X<br> 
<input type="oheckboxx" name="NorE8" value="8afFar1i" onC1iok="E8=! 
F8">Safar1<D エ > 
<input type="cheokbox" name="NorE9" Ya1ue="other" onC11ok="E9=!F9P 
> その 他 <p> al 
<input type="submit" name="BOOK1" value=" メー ル を 送る "> 
<1nput type="reset" value=" リセ ッ ト す る " onC1ick="Frest() "> 
</ Form> 
</body> 










フォ ー ム か ら の 送信 に メモ を 付け る 


<3mput type= "hidden "name=" カ dden ブチ ブ ジ ェ ク ム た 名 "Value=" 論 "> 
onSubmit=" ス クリ ブ ト / 座 数 " [イベ ント ハン ドラ ] 


bkJhxl hi 
RI 選 選 選 
に こ 】 トー】 いい 4 に 】 


万 re7ox 


Moz/a 
Before リル 
ヨ CYSamplcsyjyD1navjeatory1DformY07\jndex html 6.X 


アイ ル (P) 編集 表示 お 気 に 入 D⑳ ツール D へ 2⑱ 
の 回 回 の の me 支 smoo 


| * フ ォ ー ム か ら の 送信 に メモ を 付け る 
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Sa ね 


| お 名 前 :'eser 


email: hokaidc@shumasystem co.p 


= 葉 etss 





克 5-mac 
圧 4-mac 





件 名 吾 A | 池 旨 時 サイ 
紅 Microsolt jnlernet Erplorer が ら 投 稿 され た フォ ー ム shoksidic - 2005/02/24、 15595 


佐山 人 : shokagdc く shokadic き swmosystemcojp〉 宛先 : shokadic@shuwasyste ー 
| 伯 名: Mcrosoft pternet Epkkrer か ら 投 稿 た フォ ー ム 日 時 : Tmu 24 Feb 2005 1 " 。『 





memWo: 
2005 年 2 月 24 日 12:26:33 : 障 し テキ スト フォ ー ム の テス ト 


namae: 
tester 


gmail: 
shokaidic@shuwasystem.co.jp 


book2: 
メー ル を 送る 
AUE こ す で ョ =-ww-form-urlencoded / 5 ダ / 


= | 占 2 POSTpATAaTT 











隠し テキ スト フォ ー ム hidden オブジェ クト を 使え ば 、 フ ォ ー ム に メモ 的 な 情報 を 付加 
する こと が で きま す 。 

サン プル で は 、[ メ ー ル を 送る ] ボ タン を クリ ッ ク し た 時 に 、 イ ベン ト ハ ンド ラ 「onsSubmitl 
が 関数 の 処理 を 発生 させ ます 。 そ し て 、 隠 し テキ スト フォ ー ム に 、「document.itle」 プ 
ロ パ ティ で 取得 し た HTML ファ イル の 「<tidle></title>」 部 分 と コメ ント 、「now.toLocale 
String()] メ ソ ッ ド で 取得 し た 日 時 を 付加 し て 送信 し て いま す 。 

また 、 フ ォ ー ム の 内 容 を 「mailto:] で 送る よう に し て いる の で 、 サ ンプ ル の まま で は 
「mailto:] に 対応 し て いな い プ ラウ ザ で フォ ー ム の 内 容 を 送る こと は で きま せん が 、 hidden 
オプ ジェ クト 自体 は 機能 し ます 。 

実際 に 試す 場合 に は 、 サ ンプ ル の 「****@****** ne.jp」 の 部 分 を 、 メ ー ル を 受け 取り た 
い メ ー ル アド レス に 変更 する か 、 デ ー タ を 受け 取る CGI サー バー を 設定 し て くだ さい 。 


店 某 藩 ト ー さ コ 上 
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<!DOCTYPE HTMTL, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1> 
<head> 
<meta htEtp-equiv="Content-Script-Type" content="Eext/]avaScr1pt"> 
<meta http-equ1v="Content-Style-Type" content="Eext/css"> 
<t1 上 1e></ 上 1 上 1e> 
<SCrtpt type=" ex 上 /]avasCr1pt "> 
で !== 
Function Memo( ) { 
var now = new Date() 
var ime = now.toLoca]1eString( ) : 
var ti = documen .E1it1e: 
var com = 『": 隠 レ テ キ スト フォ ー ム の テス ト ": 
document .MATL2 .memo.value = time + it + comz: 
} 
7 ツー ニテ 
</ SCr1p セ > 
<sty1e type=" て text/cCss"> 
に So 
body { background-co1or: #EFFFfFF: } 
ーー> 
</sty1e> 
</head> 
<body> 
* フ ォ ー ム か ら の 送信 に メモ を 付け る 
く D> 
<hr> 
<fForm name="MATL2" acotion= "ma1 1 上 OO: ネネ ネネ キメ ネネ mnG.]D" method="po 
St" ongsubmi セ ="Memo( ) "> 4 
<1nput type="hidden" name="memo" で a1ue=" リ > 
<b> お 名 前 : </b><1nput type="text" name="namae" size=40><Dr> 
<b>e-mai] : </b><input type="Eext" name="ema1]1" s1ze=45><Dp> 
<input type="submit" name= "book2" value=" メー ル を 送る "> 
<1nput type="reset" value=" リセ ッ ト す る "> 
</ Form> 
</p> 
</body> 
</htm1> 


メー ル 送 信 時 に 挨拶 を 表示 する 


onSubmit=" スクリプト / 賠 数 " 


Gocument. フ ォ ー ム ガブ ジェ クト 名 . ガ ブ ジ ェクト 名 .yalue 


document. フ ォ ー ム オブ ジェ クト た 名.se7ec を ブ ブ ジ ェクト 名.options 
[document. フ ォ ー ム オブジェ クト た 名 .se7ec を ナブ ジェ クト 名 .selected 





に プ ゆ 
・ の ・ 加 還る の ws 宮 5moo 
* メ ー ル 送信 時 に 挨拶 を 表示 する 
お 名 前 jcser 


@-maillshokedcshumasystem co jp 


- こ の ペー ジ の 感想 を 選ん で 下さ い - 
面白 いよ マ 


- そ の 他 な ん で も コメ ント お 願い いた し ます - 
JeveScrlpt っ て 素晴らし い ・ 


Jesras 」 


[イベ ント ハン ドラ ] 
re7ox 
(ツイ 


アイ ル 罰 業 ) 表示 

@ 呈 の 回 国 倒 の ws 宮 5mo 
コール 送信 時 に 失 返 を 表示 する 

お 名 前 jc 


emaill shokedceshuwssystem co jp 


- こ の ペー ジ の 感想 を 選ん で 下さ い - 
面白 は 立 


- そ の 他 な ん で も コメ ント お 願い いた し ます - 
NavScript っ て 素晴らし い ! 


本 Fesrss 


grefox 
Lee_ 


Sa ね // 


圧 5-ac 
話 4-mac 








ここ に メッ セー ジ が 表示 され ます 。 


* あ り が と う ご ざ いま す !* 


ン ケ ー ト に ご 回 答 い た だ き あ り が と う ご ざ いま す ( 〇 co 
eg 5 今後 の サイ ト 作り に 役立て させ て いた だ 


きま す . 

メー ル の 内 容 は 下 の 通り で す EN 
shokaudic(@sbuwasystem co jp まで 連絡 腺 い ます . 

お 名 前 :icster 

Emal: shokasdic( の shuwasystem co jp 


感想 : 面 日 い よ 
コメ ント :JavaScnpt っ て 素 青 らし い ! 





サン プル で は 、[ メ ー ル を 送る ] ボ タン が 押さ れる と 、 メ ー ル を 送る 動作 と 同時 に 、 フ 
レー ム に お 礼 と メー ル の 内 容 を 表示 する よう に し て いま す 。 

CGI な ど で は 、 送 信 さ きれ た デー タ を サー バー が 正常 に 受け 取っ た 後 で 内 容 確認 の 文章 
を 表示 し ます 。 し か し JavaScript の 場合 は 、 イ ベン ト ハ ンド ラ 「onSubmitl が [メー ル を 
送る ] ボ タン が 押さ れ た 時 に JavaScript の 処理 を 実行 させ る の で 、 送 信 が 正常 に 行わ れ 
た か どう か の 判断 は で き な い の で 、 注 意 し て くだ さい 。 

フォ ー ム 内 の 各 値 の 書き 出し は 、text オプ ジェ クト は [「document. フ ォ ー ム オブ ジェ クト 
名 . オ プ ジ ェ クト 名 textvalue]、option オプ ジェ クト は 「document フォ ー ム オプ ジェ クト 
名 .select オ プ ジ ェ クト 名 .options[document フォ ー ム オプ ジェ クト 名 .select オ プ ジ ェ クト 
名 .selectedIndex].valune]」 と し て いま す 。 各 オプ ジェ クト の 階層 関係 に は 、 十 分 に 注意 し 
て くだ さい 。 

実際 に 試す 場合 に は 、 こ の 他 に も 「h2.htmll」 を 用 意 し 、 サ ンプ ル の 「***@**** ne.jD」 
の 部 分 を 、 メ ー ル を 受け 取り た い メ ー ル アド レス に 変更 する か 、 デ ー タ を 受け 取る CGI 
サー バー を 設定 し て くだ さい 。 


ぶ l 土 革 トー ャ ココ 
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章介 


【 フ レー ムウ ィ ン ド ウ 】 
<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Frameset//EN" > 
<htm]> 
Fefox <head> 
oz < 上 1 上 1e></ 上 1 ヒ 1e> 
7ZX </head> 
A6.X <frameset rows="*,300"> 
<Frame src="F1 .htm1" name="F1"> 
<fFrame Sro="F2 .htm1" name="F2"> 
</ Erameset> 


4.06 


<noframe8> 

フレ ー ム 機能 を 使用 し て いま す 。 フ レー ム 対 応 の ブラ ウザ で 試し て くだ さい (^_^) 。 
</nofFrames> 

</htm1> 


【f1.htmll 
<script type="tex/]avascr1ipt"> 
ぐま ーー 
function Mopen( ) { 
parent .F2 .document . open( ) 
parent . 2 .document . write ("<htm1>" ) : 
parent .F2 .document .write(" 1 Ps 
></head>" ) : 
parent . 2 .document .write( "<body>" ) : 
parent . 2 .document .write("<center><b>* あり が と う ご ざ いま す ! !*</b></ 
center>" ) : 内 
parent . 2 .document . write ("<br>" ) : 
parent . 2 .document .write ("<1mg src='image.]pg' a1ign= '1mage . 
9'>『)』 
parent .fF2 .document .write ("アン ケー ト に ご 回 答 い た だ き あ り が と う ご ざ いま す ( 
< の)7。 の 4 
parent . f2 .document .write( "<br>" ) : 
parent . f2 .document . write ( "あな た の 貴重 な ご 意見 は 、 今 後 の サ イト 作り に 役立て 
させ て いた だ きま す 。 ") : 4 
parent . f2 .document .write ("<br>" ) : 
parent . 2 .document .write ("メー ル の 内 容 は 下 の 通り で す 、 も し 内 容 に 不都合 な 点 
が あれ ば ') : 由 


parent . 2 .document .write ( "<br>" ) : 














parent . F2 .document . write ( "<a href='ma1]1 ヒ O :** メ オオ ホオ メ ネオ.mG.]D'> 
* メ メオ は え メ ネ ホ mG.D く /a>" ) : 叫 

parent . 2 .document . write( "まで 連絡 願い ます 。") : 

parent . F2 .document .write ("<hr>" ) : 

parent . F2 .document .write(" お 名 前 :" .bo1d ( ) ) : 

parent . F2 .document . write (document .MATL1 . Namae . Va1ue ) 

parent . 2 .document .write ("<br>" ) : 

parent . 2 .document .write( "E-mai1 :" .bo1d( ) ) : 

parent . F2 .document . write (document .MATL1 .EMa11 .Ya1u@) : 





parent . 2 .document . write( "<br>" ) : 
parent . 2 .document .write( "感想:" .bo1d() ) : 
paren . F2 .document .write (document .MATL1 .Kansou .Ooptions 
nt .MATL1 .Kansou.se1eoctedTndex] .Va1ue ) : 
parent . f2 .document .write ("<br>" ) : 
parent . f2 .document .write( "コメント :" .bo1d() ) : 
parent . 2 .document .write (document .MATL1 .Comment .Ya1ue ) : 
parent . 2 .document .write ("</body>" ) : 
parernt . 2 .document .write ("</htm1>" ) : 
parernt .F2 .document .c1ose( ) 
} 
// ーー-> 
く / SC エ 1D ヒ > 
中略 
</head> 
<body> 
* メー ル 送 信 時 に 挨拶 を 表示 する 
<fForm name="MATL1" act1on="ma ユ 1 上 OO :* メ メメ G* メ メメ メメ .mG.]D" method="pos ヒ 上 
" onSubmit="Mopen ( ) "> 4 
<Dp> 
<b> お 名 前 : </b><1nput type="text" name="Namae" size=40><br> 
<b>e-ma1 1 : </D><1nput type="Eext" name="EMa11" si1ze=45> 
< く /p> 
< く D> 
<b>- こ の ペー ジ の 感想 を 選ん で 下さ い -</b><br> 
<selec name="KanSou" > 
<option value=" 大 変 面白 い "> 大 変 面白 い 
<option value=" 面 白い よ "> 面白 いよ 
<option va1ue=" ふ つう だ な "> ふつ うだ な 
<option va1ue=" つ まん な いよ "> つま ん な いよ 
<option value=" よ くわ か らん ! ! "> よく わか らん !! 
</ se1ect> 
く /p> 
< く D> 
<b>- そ の 他 な ん で も コメ ント お 願い いた し ます -</b><br> 
<textarea name="Commment" rows=3 Cols=50> 
</textarea> 
</p> 
< く D> 
<input type="submit" name="BOOK1" value=" メー ル を 送る "> 
<input type="reset" value=" リセ ッ ト す る "> 
< く /p> 
</ Form> 
</body> 
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パス ワー ド を 入力 する 


<input type="pasSword" namme="paSSWorg ブ ブ ジ ェクト 名 " 
Yalue=" 倫 " イベ ント ハン だ ラ > 









* パ スワ ー ド を 入力 する 






パス ワー ド は "mh123"。 
入力 し た ら フォ ー ム 以外 の 所 を クリ ッ ク し て くだ さい 。 






ト 


YOU 1 同 | に 


27Y3】 CV)】 ッ - ル DA ルプ [ コ 
@ 下 の 回 還 人 の の w 支 PRoo 

正しい パス ワー ド が 入力 され 
まし た 


password オプ ジェ クト は 、 一 見 する と 普通 の テキ スト の 入力 欄 と 同じ で す が 、 こ の 
フォ ー ム 内 に 入力 され た 値 は 、 黒 丸 な どの 他 か ら は わか ら な いも の に 置き 換え られ て 
表示 され ます 。 

サン プル で は 、 パ スワ ー ド を 入力 し て も らい 、 そ れ が 正しけれ ば 別 の ペー ジ を ロー ド 
し 、 間 違っ て いれ ば 警告 を 出し ます 。 JavaScript は 基本 的 に ソー スコ ー ド を 隠す よう に 
は で き て いま せん の で 、 パ スワ ー ド を 完全 に 隠 礎 す る こと は 難し く 、password オプ ジェ 
クト を 実際 に 使う 場面 と し て は 、CGI の 入力 用 イン ター フェ イス と し て 使用 する こと 
を 前 提 と し て いる と 思わ れ ま す 。 

な お 、password オプ ジェ クト は JavaScript1.0 か ら の JavaScript で す が 、Netscape 
Navigator 2.0 で は 値 を 正確 に 取得 で き な い 場合 が あり ます 。 


RUUU 間 Em 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm]1><head> 

<meta hEEDp-equ1v マ = "ConEent-Script-Type" content="Eex 上 / avaScr1pt 上 "> 
<meta http-equiv="Content-Sty1e-Type" content="text/css"> 

<ti 上 1e></ 上 1 上 1e> 

<SCr1p type="tex/]avaSCr1p 上 "> 

ぐ ! ニニ 


function GetP(s) { 























if (gs=="mh123") { 1ocation.href = "OK.htm1" } 
else { alert( "入力 され た 暗証 番号 "+s+ "は 間違い で す !!") } 


選 
に 
ご 


} 
//-- テ > 
< く / SC エ 1D キ > 
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回 国 還 
= トー しい | 


<sty]e type="Eext/css"> Moz/a 
く ! ニー 
body { background-co1or: #EEFFfFfF: } 


ーー テ > 


</ sty1e> 
</head> 

<body> Ope/a6 
* パス ワー ド を 入力 する 

<D> Sa ね / 
パス ワー ド は "mh123"。<br> 圧 5-mac 
入力 し た ら フ ォ ー ム 以外 の 所 を クリ ッ ク し て くだ さい 。<br> /E4-m 


<fForm name="ANSHYO"> 
<1nput type="password" name="anshyo" onB1ur=" Getp(Ehig.va1ue) " 加 
Ya1ue=" リ > 


</ Eorm> 
く /p> 
</body></htm1> 









JavaScript で 「"」 を 書き 出す 方 法 

JavaScript で は 、 文 字 列 を ダブ ルク ォ ー テ ーション マー ク 「"」 で 囲ん で 指定 する 
必要 が あり 、 そ の 中 で は 「"」 を 使う こと は で きま せん 。 

で は 、JavaScript で ダブ ルク ォ ー テ ーション マー ク 「"」 を 書き 出し た い 時 に は 、 
どう すれ ば よい の で し ょ うか が ? 

まず ひと つの 方 法 と し て 、 特 殊 キ ャ ラク ター 文字 の 「\"」 を 使う 方 法 が あり ます 。 
そし て 、 も う ひ と つ は 、 サ ンプ ル の よう に 「"」 と 「'」 の ネス ト ( 入 れ 子 ) の 関係 を 逆 に し 
て 、 文字 列 を シン グル クォーテーション マー ク 「」 で 囲み 、 そ の 中 で 「"」 を 使う と いう 
方 法 が あり ます 。 
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リセ ッ ト し て も いい が 確認 する 


onReset=" ス クリ ブ ト / 悦 数 " [イベ ント ハン ドラ ヲ ] 

















侍 C\Samples\js\01naviator\1Oform\10\mdex html 


アイ ル (E) 編集 E) 表示 (\) お 気に入り ウー ル GD へ 2⑪ 
の の 加 還 の の 時 5mcp 
ォ リ セッ トレ て も いい いか 確認 する 
お 名 前 .ester 
[本 EzFms) 
















OAD に 
L_X_J 





イベ ント ハン ドラ 「onResell は 、 リ セッ ト ボ タン が 押さ れ た 時 の イベ ント を 取得 し ます 。 
サン プル で は 、[ リ セッ ト す る ] の ボタ ン が 押さ れ た 時 に 確認 の ダイ アロ グ ボ ックス を 
開き 、[OK(Yes)] が 押さ れ た 時 は フォ ー ム を リセ ッ ト し 、 そ う で な い 時 は リセ ッ ト の 
処理 を 中 止 し て いま す 。 

JavaScriptl.1 で 追加 され た イベ ント ハン ドラ で す 。 

実際 に 試す 場合 に は 、 サ ンプ ル の 「****@******.ne.jp] の 部 分 を 、 メ ー ル を 受け 取り た 
い メ ー ル アド レス に 変更 する か 、 デ ー タ を 受け 取る CGI サー バー を 設定 し て くだ さい 。 


ET 十 LTENTTーー 


< く 8Cr1D ype= "tex / JaVaSC エ 1p 上 "> 
Co こつ 
function Mcheck() { 
1 ( confirm (' フ ォ ー ム の 内 容 を リセ ッ ト し ます 。 \n よろ し けれ ば [OK] (Yes) を 押 

し て くだ さい 。") ) { return true } 
return fa]se } 
// ーー テ > 
く / SCr1D セ > 

中略 
<fForm name="MATL4" action="ma11O:*** メ G***** mnG.JD" method="post" 
onReget="return Moheck( ) "> 4 
<b> お 名 前 : </b><1nput name="Namae" size=20><br> 
<h エ > 
<1nput type="submit" name="BOOK1" value=" メー ル を 送る "> 
<1nput type="reset" value=" リセ ッ ト す る "> 
</ Form> 
く /p> 
</body> 


2) confirm(): 「window オブジェ クト 」 の 「 確 認 ボタ ン 付き の ダイ アロ グ ボ ックス を 開く 」(P.334) 








アッ プロ ー ド する ファ イル を 選ぶ 


<input type="file"' name=" 七 @ ブ ブ ジ ェクト た 名 "> 
Glocument. フ ォ ー ム 名 .77e ナブ ジ ェクト 名 .value 








[プロ パテ ィ ] 










注 CYSamplesYjsYD1navieator\10formYi1\mdex html 


アイ ル P) 罰 集 EC) 表示 お 気 に 和 0⑳ ウー- ル GD へ ルプ ⑪ 
@ の 回 国人 る の et 宮 5mD 


* ア ッ プ ロー ド す る ファ イル を 選ぶ 














アッ ブロ ー ド する ファ イル : 









(は 


2 トブ 





アイ 5 em ヨ 
fi0WO 7 て ozhe で 9 


FileUpload オプ ジェ クト は 、 ア ッ プ ロー ド す る ファ イル を 選択 する フォ ー ム で す 。 
[参照 .….] ボ タン を クリ ッ ク す る と ロー カル の ディ レク トリ が 参照 で き 、 選 択 す る と テ 
キス ト 欄 に ファ イル 名 が 表示 され ます 。 そ の 時 に 、「valunel プ ロ パ ティ に は ディ レク ト 
リ の 情報 が 納め られ 、「document. フ ォ ー ム 名 .file オプ ジェ クト 名 .value」 で 参照 する こと 
が で きま す 。 

FileUpload オプ ジェ クト は 、 あ くま で も アッ プロ ー ド する ファ イル を 選択 する こと し 
か で きず 、 実際 に アッ プロ ー ド する 作業 は 、 HTML や CGI の 力 を 借り る こと に な り ま 
す 。 こ れ は 、 JavaScript が セキ ュ リ ティ 確保 の た め 、 ロ ー カ ル の リソー ス に アク セス す 
る こと を 厳し く 禁 止 し て いる た めで す 。 

JavaScript1.1 で 追加 され た オプ ジェ クト で す 。 


ED 揚 


<fForm name="fForm1"> 
<D> 
アッ プロ ー ド する ファ イル : <input type="Ei1e" name="Up1oadFi1e"> 
< く /p> 
<input type="button" value=" Fai1e 情 報 
onC1ick="alert ( ' こ の ファ イル の ディ レク トリ は + document .Eorm1 .Op1oad 
Fi1e.value+ です 。! ) "> 4 
</ Form> 


t⑳ <input type デ flle'> : 「 フ ォ ー ム 」 の 「 フ ァイル 選択 の 機能 を 付け る 」(P.130) 
alert() :「window オ ブ ジ ェクト 」 の 「 警 告 用 の ダイ アロ グ ボ ックス を 開く 」(P.333) 





ーー 
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に 
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加 回 回 上 還 上 記 

に 3 に 3E ヨ に 』 ご) 
に ' 肖 まう 


加計 
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OpeyaZ 
Opeya6 


Sa7 ね / 
圧 5-mac 


左 4-mac 


の ト 圭 藩 層 トー さ コ 上 


Tom フジ ェクト 4 





フォ ー ム の 内 容 を 後 か ら 変え る 


<input type="radio" name="radio ブ ブ ジ ェクト 名" value=" 仁 " 
イベ ペン トバ ハン だ ラ > 

<Select name="seJec: ブ ブ ジ ェクト "> 

< く ODtion> 

options[ インデ ックス ] 


太 re7ox 
の // 


守 吾 
還 に 也 
に トコ に 】 





ル 4.06 
WM4.X 
の リア 【 navieatorW10formW12Wmdex html 
フイ ル ⑥ 軒 集 6 W) お 気に入り ウー ル D へ M プ ⑪ 
Opeya6 


Op の 回 四 人 の の w pmoo 


* フ ォ ー ム の 内 容 を 後 か ら 変 える 


男の子 用 と 女の子 用 の 2 通り の プレ ゼン ト を 用 意 し まし た 。 ど ち 
ら か の ラジ オ ボ タ ン を クリ ッ ク し て か ら 記 ん で くだ さい 。 





男の子 用 
の 子 用 


男の子 用 に 女の子 用 の どちら か を 選ん で (〈 だ さい 。 


IO After 


TOEETTUMTUMUI 





WOMIYTTUMSIUUDPDOPTOAAIUTLUPATTESTL TI 


アイ ル (P) 誠 集 () 表示 ⑰ お気 に 入 DO ツー ル ①D へ M プ ⑪ アイ ル (FE) 胃 集 (E) 表示 お 気に入り (⑯ ツー ル ① へ ルプ ⑱ 

@ 京 の 回 還 人 人 の es 誠 5R29 @ ま の 回 還 人 の の Ms 宮 5m9 

* フ ォ ー ム の 内 容 を 後 か ら 変え る | | フォーム の 内 容 を 後 か ら 変え る 

男の子 用 と 女の子 用 の 2 通り の プレ ゼン ト を 用 意 し まし た 。 ど ち 男の子 用 と 女の子 用 の 2 通り の プレ ゼン ト を 用 意 し まし た 。 ど ち 
ら か の ラジ オ ボ タ ン を クリ ッ ク し て か ら 遂 ん で くだ さい 。 ら か の ラジ オ ボ タ ン を クリ ッ ク し て か ら 骨 ん で < だ さい 。 


る 男の子 用 の 男の子 用 
の 女の子 用 @ 女 の 子 用 


| 男の子 用 の ブレ ゼット ちの 子 用 の フレ ゼット ト 
の 和子 用 の プル ヤ フル や 


テテ イペ アー 
スニ ドレ ルス 
|6 ち ゃ の (男の子) 6 ちゃ 0 誠 ( な の 


JavaScript1.1 か ら は 、 フ ォ ー ム の 内 容 を 後 か ら 変 更 で きる よう に な り ま し た 。 

サン プル で は 、「options[ イ ン デ ックス ]」 で [男の子 用 ] と [女の子 用 ] の 2 種類 の option オ 
プ ジ ェ クト の 配列 を 作り 、 そ れ を ラジ オ ボ タ ン の クリ ッ ク で 切り 替え て いま す 。 
JavaScript1.1 で 追加 され た プロ パテ ィ で す 。 


| Samplo 王 還 還 還 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML. 4.01 Transitiona] / /EN"> 
<htm1><head> 

<meta htEp-equiv="Content-Scr1pt-Type" content="tex 上 /]avascr1pt"> 
<meta http-equiv="Content-Sty1e-Type" content="text/csg"> 

< 上 1 上 1e></ 上 1 ヒ ]1e> 
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の + 土 鞭 ト ー ミ コ 上 【 








<SCript type="Eext/avaSCr1p 上 "> 
く ! - 一 
function BY(PR) { 
PR .pr.options[0] .text = "男の子 用 の プレ ゼン ト ": 
PR .pr.options [1] .text = "プラ モデ ル ": 
PR .pr.options[2] .text = "スニ ー カ ー": 
PR .pr.options[3] .text = "お も ちゃ の 和 缶詰 (男の子 用 ) " : 
} 
function GR(PR) { 
PR.pr.options[0] .text = "女の子 用 の プレ ゼン ト ": 
PR .pr.options [1] .text = "テディ ベア ー": 
PR .pr.options [2] .text = "ドレ ス ": 
PR .pr.options [3] .text = "お も ちゃ の 缶詰 (女の子 用 ) " 


) Operae 

ーー 

</ SCr1p セ > Sa ね // 
話 5-m 

<style type="text/css"> リア プル 


<!ーー 

body { background-col1or: #FEFFfFfF: } 
ーー テ 

</ sty1e> 


</head> 
<body> 
* フォー ム の 内 容 を 後 か ら 変 える 
< く P> 
<hr> 
男 の 予 用 と 女の子 用 の 2 通り の プレ ゼン ト を 用 意 し まし た 。 どちら か の ラジ オ ボ タ ン を クリ ッ ク し て 
か ら 選 ん で くだ さい 。 
< く /p> 
<fForm name="BORG"> 
<1nput type="radio" name="borg" value="BOY" onC1iok="BY(this. 
Eorm) "> 男の子 用 
<D エ > 
<input type="radio" name="borg" value="GTR" onC1iok="GR (his. 
form) "> 女の子 用 由 
<D> 
<se1ect name="D エ "> 


<option> 男 の 予 用 と 女の子 用 の どちら か を 選ん で くだ さい 。 


</ se]ect> 

</ Form> 

</p> 
</body></htm1> 





Sa ね / 
リネ 7 
在 -ac 





ぶ 寺 洪 よ ー ュ コ 上 【 





document. フ ォ ー ム ブチ ブ ジェ クト 名 .elements[7].type [プロ パテ ィ ] 


EAIIT4L4EETT は 3 


* ォ フォー ム の タイ ブ を 調べ る 


加 CheckBox 
adion 
[sslsct 調 


隊 レ テキ スト ボッ クス 


(きま 虹 .」 


1 番目 の フォ ー ム の タイ ブ :button 

2 番目 の フォ ー ム の タイ ブ :chsckbsx 
3 番目 の フォ ー ム の タイ ブ :rsdio 

4 番目 の フォ ー ム の タイ ブ :sslsct-ons 
5 番目 の フォ ー ム の タイ ブ :submit 

6 番目 の フォ ー ム の タイ ブ :texx 

7 番目 の フォ ー ム の タイ ブ :tsxaarss 
8 番目 の フォ ー ム の タイ ブ : password 
9 番目 の フォ ー ム の タイ ブ :reset 
10 番 目 の フ ォ ー ム の タイ ブ : hddsn 
11 番 目 の フ ォ ー ム の タイ ブ : fis 





「type」 プ ロ パ ティ は 、「button」 や 「checkboxl な どの フォ ー ム の タイ プ を 返す プロ パテ ィ 
で ま 。 

サン プル で は 、 フ ォ ー ム オプ ジェ クト 「FTYPE」 内 の 各 フ ォ ー ム 関連 の オプ ジェ クト を 
配列 と し て 捉え 、 上 か ら 順 番 に タイ プ を 書き 出し て いま す 。 

JavaScriptl.1 で 追加 され た プロ パテ ィ で す 。 


| Samnlc 補 時 


< く !DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1><head> 

<meta htp-equiv="ConEent-Script-Type" content="text / avaScript"> 
<meta http-equiv="Content-Sty1e-Type" content="text/css"> 

< 上 1 上 ]e></t 上 1 上 ]e> 


<sty1e type="text/oss"> 

に 

body { background-co1or: #FEFFFF: } 
ーー> 


</ sty1e> 


446 Fom オ プ ジ ェ クト 


</head> 
<body> 
* ょ フォ ー ム の タイ プ を 調べ る 
ぐ D テ > 
<Form name= "FTYPE"> 
<1input type="butEon" name="BUTTON" va1ue=" But て on "><D エ > 
<1nput type="checkbox" name="CHECBOX" va1ue="CheckBox" checjked 
>CheCkBOx<D エ > 了 
<input type="radio" name="RADTO" va]ue="RadioButton" checked>R 
ad1oButton<br> 4 
<select name="SELECT"> 








<option>Se1ec 
<option>Se] eo 上 1 
</ se] ec 上 ><br> Ope/a6 
<1nput type="8ubmit" name="SUBMTT" va]1ue=" Subm1tButton "><b エ > 
<1nput type="text" name="TEXT" va1ue="TexEBox" S1ze=10 ><Dr> 人 上) た 
<textarea name="TEXTAREA" rows=3 co1s=20 RI /E5 
b エ > リズ | 


<1input type="pasSword" name="PASSWORD" value="Password" size=1 

5><br> 4 
<1nput type="reset" name="RESET" value=" ResetBuEon "><b エ > 
<input type="hidden" name="HTDDEN" value="Hidden"> 隠 し テキ スト ボッ 

クス <br> 4 
<1nput type="f11e" name="Upl1oadFi1e"> 

</ form> 

</p> 

<h エ > 


<SCr1pt type="Eext/]avaScript"> 

く !-ー 

var 1 = document .FTYPE.e1ements .]ength: 

for(1=0: 1<L: ++) { 

document .write( i+1 + "番目 の フォ ー ム の タイ プ :" .bo1d() ) : 
document .write (document .FTYPE.e1ements [1] .Eype) : 
document .write( "<br>") : 

} 

//-ー-> 

</ Script> 


</body> 
</htm1> 
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ーー 
hl 
\n 
ぃ ー】 
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等 C\Samples\js\D1naviator\11area\01\index html 


アイ ル 編集 D 表示 ⑰ お 気 に 入 0⑯ ウツ - ル CD AL プ ⑪ 
GO・ の 回 国人 の の we 吉 5mo 


* マ ッ プ エリ ア 外 を クリ ッ ク し た ら 警 告 用 の ウィ ンド ウ を 開く 





サン プル で は 、 イ メー ジマ ッ プ の リン ク を 指定 し た 範囲 山 が クリ ッ ク さ れ た 時 は 
[JavaScrip」 で 関数 を 発生 きせ ペー ジ を 読み 込み 、 範 囲 外 を クリ ッ ク さ れ た 時 は 警告 用 
の ダイ アロ グ ボ ックス を 開く よう に し て いま す 。 

この サン プル スク リプ ト は 、Netscape Navigator 2.X で も 使用 で きま す 。 
実際 に 試す 場合 に は 、 こ の 他 に も 「MAPIL.htmll -「MAP3.htmll の 3 つの ファ イル を 用 意 
MC だき W。 


|Sunplo 下 還 

【 メ イン ウィ ンド ウ 】 

<!DOCTYPE HTMIL, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / / EN"> 
<html><head> 

<meta ht て p-equ1 マ ="Content-Script-Type" content="text/] avaScrip"> 
<meta http-equiv="ConEtent-Sty1e-Type" content="text/css"> 

< 上 it]e></ 上 11e> 





< く SCript ype="text/]avascript"> 


トル ーー 

function Go(ur1 ) { 1ocation .href=ur] } 

function Miss() { alert(" イ メー ジマ ッ プ の エリ ア 外 で す ! !") } 
ニー 

< く / SCrip キ > 


<style type="text/css"> 
に 
body { background-co1or: #FFFFFF: } 


ーー テ 


ク 
リ 
の 4 
カ 
以 
ル 
軸 
と 
の 
に 
作 
す 
る 


</ sty1e> 


6 mm ォ ジェ クト 


</head> 

<body> 

* ょ マッ プ エ リ ア 外 を クリ ッ ク し た ら 警 告 用 の ウィ ンド ウ を 開く 

で ロ テ 

<map name="ARTA1"> 

<area name="aria1" shape=rect coords=13 , 9 , 73, 69 ooo 

pt :Go( 'MAP1 .htm1! ) "> 

<area name="aria2" shape=circ]e coords=119, 38, 29 | 
骨 
4 





pt :Go( "MAP2 .htm1' ) "> 

<area name="ar1a3" shape=po]y coords=160,69,188,7,222,.69 hreE= 
JavaSoript : Go ( "MAP3 .htm1! ) "> 

<area name="aria4" shape=rec Coords=0 , 0 , 234, 81 href="Javya8or ふ 
pt:Migsg( ) "> 
</map> 
<1mg Sro="MAP.]pg' Usemap="#ARTA1" border=0 width="234" height="81" 
a1 ヒ = "ARTATEST"> 
く /p> 
</body> 
</htm1> 





エリ アマ ッ プ 内 で Netscape Navigator ら .0 で も 
使え る JavaScript は ? 

Area オ ブ ジ ェクト は 、JavaScript 1 .1 か ら 追 加 さ れ た オブ ジェ クト で す が 、<grea> 
内 で 「href= ビ JavaScript 関 数 '] を 使え ば 、JavaScript1.1 に 対応 し て いな い Netscape 
Navigator 2.0 で も 機能 する スク リプ ト を 作る こと が で きま す 。 こ れ は 、Area オブ 
ジェ クト が Link の 配列 内 に ある た め だ と 思わ れ ま す 。 

つま り 、Netscape Navigator 6.0 で は 、<garea> 内 の [href ビ JavaScript 関 数 "| は 、 
リン クオ ブ ジ ェクト と し て 捉え られ て いる の で し ょ う 。 

し か し 、<area> に 記さ れ た 「onMouseOver」 や [onMouseOut」 な どの イベ ント 八 
ンド ラ は 、Netscape Navigator 6.0 か ら サ ポー ト さ れ て いる JavaScript1.0 に 関 
し て も 、 評価 は され ませ ん 。 

し た が っ て 、 た と えば 「 フ ォ ー ム に 説明 を 出す 」( 次 ペー ジ ) や 「 イ メー ジマ ッ プ を リン 
ク 以 外 の 機能 で 使う ](P.452) の サン プル は 、Netscape Navigator 2.0 で 実行 する 
と 、 フ ォ ー ム に 文字 を 書き 出す スク リプ ト の 部 分 は 動き まま せん 。 た だ し 、 新 し い ウ ィ 
ンド ウ を 開い た り 、 背 景色 を 変え た りす る 部 分 の スク リプ ト は 、 正 常に 動き ます 。 
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JavaScript 


フォ ー ム に 説明 を 出す 


href="javascrinpt: 脚 数" 
onWrouseOver=" ス クリ ブ ト / 半数 " [イベ ント ハン ドラ ] 
onWrouseOut=" スク リブ ト / 疾 数 " [イベ ント ハン ドラ ] 












筆 cYsamplesyjsninavieator\i1a.. 司 | 隔 了 区 


アイ ル ⑥) 編集 6 表示 お 気 に 和 AOP 大 
GO 回 還る の 時 


* フ ォ ー ム に 説明 を 出す 



















イル 細 集 (5) 表示 お気 に AOWP 閉 


GO 回 国人 の we 





旨 c.v5ampleswisw0inavieatory11a.. 局 | 回 | 孤 | 


アイ ル (P 編集 (D 表示 お 気 に 和 DO” 閉 
GR・ の 6 回 回 の の we 


ォ フ ォ ー ム に 説明 を 出す 


条 の 三 朋 









サン プル で は 、 指 定 さ れ た エリ ア 内 に マウ スカ ー ソ ル が 乗っ た 時 に 、 イ ベン ト ハ ンド 
ラ 「onMouseOver」 が フォ ー ム に 文字 を 書き 出し ます 。 エ リア 内 か ら マ ウス カー ソル が 
離れ た 時 は 、 イ ベン ト ハ ンド ラ 「onMouseOut」 が 関数 「MessCrO」 を 発生 きせ て フォ ー ム 
に 「" "」 の 値 を 引き 渡し 、 そ れ に よっ て フォ ー ム 内 の 文字 を 消去 し て いま す 。 

イベ ント ハン ドラ 「onMouseOver」 は 、Netscape Navigator 2.X か ら 使 用 可能 な Java 
Script1.0 に 対応 し て いる イベ ント ハン ドラ で す が 、<area> 内 で は 評価 され ませ ん 。 

な お 、 リ ンク を クリ ッ ク す る と 新しい ペー ジ が 開き ます 。 

「onMouseOut」 は 、JavaScriptl.1 で 追加 され た イベ ント ハン ドラ で す 。 
実際 に 試す 場合 に は 、 こ の 他 に も 「MAP2.html」 と 「MAP3.html を 用 意 し て くだ さい 。 


| Sonplo 


【 メ イン ウィ ンド ウ 】 
<SCr1p ype=" て ext / avaSCr1pt"> 
で ビュ 


function Go (ur1) { window.open( ur1 ,"TWindow" ) } 
function Mis() { al1ert(" イ メー ジマ ッ プ の エリ ア 外 で す ! !") } 
function MessCr() { document.Fmess.Emess .value = "" } 
oo 
< く / SCr1D キ > 

一 中略 て 





0 Ame オ ラジ ェクト 


</head><bodY> 
* フォ ー ム に 説明 を 出す 
<D> 
<map name="ARTA1"> 
<area Shape=rec coords=1.3 , 9, 73, 69 
href="Java8cript : Go( "MAP1 .htm1')『 
onMouseOver="documen .Fmes8 .fmes8.Yalue = 『' 緑 の 四角 " 
onMouseOut="MesgCr( ) "> 
<area Shape=circ1]e coords=119 , 38,29 href="Java8cript :Go( "MAP2 
・htm1')『" 4| 
onMouseOver="documen .Fme88.Fmes8.Value = 「' 黄 色 の 丸 '" 
onMouseOut="MesgCr( ) "> 
<area Shape=po1y coords=160,69,188,7,222,69 href="Java8oripts 
Go( 'MAP3 .htm1!)『 al 
onMouseOver="document .Fmess .Emess.value = ' 赤 の 三角 !" 
onMouseOut="Meg8Cr() "> 
<area Shape=rect coords=0, 0,234,81 href="JavaSoript :Mis ( ) " 
onMougeOver="Me88Cr()"> 
</map> 
<img src="MAP.]pg' usemap="#ARTA1" border=0 width="234" height="81 
" a1t="ARTATEST"> 4 
< く /p> 
<D> 
<form name="Fmes8"> 
<input type="text" name="fFmess" size=20> 
</ form> 
</p> 
</body></htm1> 


【MAP1.htmll 
<Script type="text/ avaScript"> 
く ! ーー 
focus ( ) 
/ ソ ニニ テ 
</ scr1p セ > 
で 中略 て 
<body> 
<1mg Sro="MAP1 .Jpg" width="60" height="59" a1t="M1dor1S1kaku"> 
<hr> 
<b>* 縁 の 四角 *</b> 
</body> 
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イメ ー ジ マッ プ を リン ク 以 外 の 機能 で 使う 
リプ) href="javascript: 朗 数" 


た refox onMiouseOver=" ス クリ ブ ト / 商 数 " [イベ ント ハン ドラ ] 
onVIouse0ut=" ス クリ ブ ト / 半数 " [イベ ント ハン ドラ ] 


に 
硬 
【n 
に 】 


Before After 


CYSamples\js\01navieator\11areaW03Vindex html 3 計 C:\5amples\js\D1navieator\11ar 
= 


PLMUELTTSSTPT 


アイ ル (上 妨 集 D 表示 Q⑦ お 気 に 入 D⑱ ツー ル CD JI プ 0⑳ ファ イル ) 編集 6) 表示 お 気 に 入 0 ツ -MD へ JI プ ⑪ 
@・ の - 避 の の 野宮 5mo9 GO の 貼る の ws 吉 5mo 


ォ * イ メー ジマ ッ プ を リン ク 以 外 の 機能 で 使う 


バッ ク 2 を に 





当 CYSamplesW 
アイ ル (5 編集 D 


@ 京 ・ の 訓 国 倒 の ws 支 5mA 


バッ ク 2 を 任 色 に 





サン プル で は 、 指 定 さ れ た エリ ア を クリ ッ ク す る と 、 [JavaScript:] が 関数 [BdColor() | 
を 発生 きせ て 、 中 で 指定 し て いる 色 の 値 を 「document.bgColor」 に 引き 渡し 、 背 景色 を 
変更 し て いま す 。 


ED 制 


< く !DOCTYPE HTMIL PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm] > 

<head> 

<meta http-equ1v="ConEent-Script-Type" ConEen キ = "ext / avaScr1ipt "> 
< 上 1 上 1e></ 上 1 上 1e> 





<ScCript ype="tex/]avascript"> 

に リビドー 

function BdCo]or (BC) { document .bgCo1or=BC } 
Function Mis() { alert(" イ メー ジマ ッ プ の エリ ア 外 で す ! !") } 


1 い 、NS EC を (は NN IS KS こい 』 用 


2 Amm ォ ラジ ェクト 


Function MessCr( ) { document .Fmess . Emess .Value = "" } 
// ニ ニシ 
</ Script> 


</head> 
<body> 
* イ メー ジマ ッ プ を リン ク 以 外 の 機能 で 使う 
<Pp> 
<map name="ARTA1 "> 
<area name="aria1" shape=rec coords=13, 9,73,69 
ipt :BdCo1or('green' )" 
onMouseOver="document .Fmess .Emess .Yalue = ' バ ッ ク を 緑 に !" 
onMouseOu モ ="Me88Cr()『> 
<area name="aria2" shape=circ]e coords=119, 38,29 和 
ipt:BdCo1or( 'ye11ow')『 
onMouseOver="documen .FmeSsg.Emes8.value = ' バ パッ ク を 黄色 に !" 
onMouseOu モ ="MesgCr()" > 
<area name="aria3" shape=po]y coords=160,69,188,7,222,69 
Java8oript : BdCo1or('red' )" 
onMouseOver="documen .Fmesg.Fmes8.Yalue = "バッ ク を 赤 に !" 
onMouseOut="Mes8Cr( ) "> 
<area name="aria4" shape=rect coords=0, 0,234, 81 oo 
pt:Mig()" 
onMouseOver="Me88Cr( ) "> 
く /map> 
<1mg Src="MAP.]pg" usemap="#ARTA1" border=0 width="234" height="81" 
a1 ヒ 上 = "ARTATEST"> 
< く /p> 
で く D テ > 
<form name="FmeS8"> 
<1input type="text" name="Fmess" size=20> 
</ form> 
< く /p> 
</body> 
</htm1> 
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5 mage オ フジ ェクト 


画像 の 情報 を 取得 する 


document. オ ナブ ジェ クト 名 .border [プロ バテ ィ ] 
Gocument. ブ サブ ジェ クト 名 .complete [プロ バテ ィ ] 
document. ガ ナブ ジェ クト 名 .height [プロ バテ ィ ] 
document. ブ サブ ジェ クト 名 .hspace [プロ パテ ィ ] 
document. ガ ブ ジ ェクト 名 .1owsro [プロ パテ ィ ] 
document.images[ イン デック ス ].src [プロ バテ ィ ] 
document.images[ インデックス].vVspace [プロ バ パティ] 
document.images[ プン デック ス ].wridth [プロ パテ ィ ] 





アイ ル ) 編集 表示 ⑰ お 気 入 D ウー- ル LOD へ ルプ ⑬ 


OR の 回 の の w mmon 





ロー ド が 終わ っ た か :falss 

イメ ー ジ の 高 さ :100 

イメ ー ジ の hspacs:2 

lowsrc の URL: image1 jpg 

イメ ー ジ の URL: 
fle///G./Samples/js/01navigator/12imase/01/image2.jpg 
イメ ー ジ の vspace:2 





Image オプ ジェ クト は 、 ペ ー ジ 上 の 画像 の 0 か ら 始 まる 配列 を 作成 し ます 。Image オブ 
ジェ クト の 情報 は 、<img> 内 で 設定 し た 「name」 で 参照 する 以外 に 、 配 列 で も 参照 で き 
ます 。 

「border」 プ ロ パ ティ は ボー ダー の 値 を 、「complete」 プ ロ パ ティ は 画像 の ロー ド が 終っ て 
いれ ば 「true」 の 値 を 、 終 っ て いな けれ ば 「false」 の 値 を 、「height] プ ロ パ ティ は 画像 の 高 
さ の 値 を 、 「hspace]」 プロ パテ イィ は ドキ ュ メ ント と の 横 方 向 の 間隔 の 値 を 、「lowsrc」 プ ロ 
パテ ィ は 正式 な 画像 を 表示 する 前 に 代わ り に 表示 する 低 解 像 度 の 画像 の URL を 、「src]」 
プロ パテ ィ は 画像 ファ イル の URL を 、「vspace」l プ ロ パ ティ は ドキ ュ メ ント と の 縦 方 向 
の 間隔 の 値 を 、「widn] プ ロ パ ティ は 画像 の 幅 の 値 を 、 そ れ ぞ れ 持 っ て いま す 。 
「src」 プ ロ パ ティ 以外 は 読み 込み 専用 で 、 後 か ら 変 更 す る こと は で きま せん 。 し か し 
「src」 プ ロ パ ティ の 値 は 変更 可能 な の で 、 そ れ を 変え る こと に よっ て イメ ー ジ を 置き 換 
える こと が で きま す 。 

JavaScriptl.1 で 追加 され た オブ ジェ クト で す 。 

な お 、 こ の スク リプ ト で は 、Netscape 6.X で 「borderl[hspace」「vspace」 の 値 を 取得 する 
こと が で きま せん 。 





| 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1> 
<head> 
<meta http-equ1v="Content-Script-Type" conten 上 ="tex/avaScCr1p 上 "> 
<meta http-equ1v="ConEent-Style-Type" content="Eex 上 /css"> 
< 上 1 上 1e></ ュ 上 1e> 
一 中 略 
</head> 
<body> 
* 画像 の 情報 を 取得 する 
<D> 
<1img Src="1mage2 . pg" name="TMG" a]t="1mage.]pg" width="100" 3 
t="100" 1owsrc="image1 . pg" border="2" hspace="2" Vspace="2"> 
< く /p> 
< く D> 
<SCript type="Eext/]avascr1pt"> 
ぐ ! ニー 
document .write ("ボー ダー : ") : 
document . write ( document . MG . border) : 
document .write( "<Dr>" ) : 
document .write ("ロー ド が 終わ っ た か : ") : 
document .wri て e ( document . TMG .Comp1e@) : 
document .write( "<Dbr>" ) : 
document .write ("イメ ー ジ の 高 さ : ") : 
document .write ( document .TMG .height ) : 
document .write ("<Dbr>" ) : 
document .write ("イメ ー ジ の hspace : ") : 
document .write (documen . TMG . hspac@) : 
document .write( "<Dbr>" ) : 
document .write("1owsrc の URL : "): 
document .write (document .TMG 1Ow8 エ C) : 
document .write ("<br>" ) : 
document .write ("イメ ー ジ の URL : ") : 
document .write (document .images[0] .5rc) : 
document .write ("<br>" ) : 
document .write ("イメ ー ジ の vspace : ") : 
document .write (document .imagegs[0] .Y5pace ) : 
document .write ( "<br>" ) : 
document .write ("イメ ー ジ の 幅 : ") : 
document .write (document . images [0] .width) : 
// ーー テ > 
< く / SCr1D キ > 
</p> 
</body> 
</htm1> 
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ぶ 選 葵 藩 ペ ツー 


ロレ ルー だ ニン レ 2 


ガブ ブ ジェ クト 名 = new Image( ) 
document. オ ナブ ジェ クト た 名 .src [プロ パティ] 





丘 C-Y5amplesYjsWd 


+ 画 像 を アニ メー 誤 百 7 中 
アイ ル (上 ) 編集 (上 表示 ⑦ お 気に入り @ CD へ ルプ ⑯ 


の 同国 人 の の we 支 smo 





アイ ル ) 編集 D 表示 お 気 に 和 9Q) ウール ⑪D へ M プ ⑪ 


Os の 回 肖 人 の の we 宮 m 





「src」 プ ロ パ ティ の 値 を 後 か ら 変 更 で きる こと を 利用 し て 、 複 数 の 画像 を リア ル タ イ ム 
に 切り 替え て 、 ア ニメーション の よう な 効果 を 出す こと が で きま す 。 

サン プル で は 、 ま ず imagel.jpg か ら imageS.jps まで の 5 枚 の 画像 を 用 意 し 、Array オプ 
ジェ クト を 使っ て Image オブ ジェ クト の 配列 を 作成 し て いま す 。 配列 内 の 要素 に は 、 
「ANIMA[1]] か ら 「ANIMA[5]] の 5 つの Image オ プ ジ ェ クト が あり 、 そ れ ぞ れ 
「ANIMAI1].src」 に 「imagel.jpg] の 値 、「ANIMA[2].src」 に 「image2.jpg の 値 、 と いっ た 具 
合 に 画像 ファ イル の URL の 値 を 設定 し て いま す 。 

ペー ジ が 読み 込ま れ た 時 に 、<body> 内 に 設定 し た イベ ント ハン ドラ 「onLoad」 が 、 ア ニ 
メー ショ ン の 処理 を 設定 し た 関数 「anime_1()」 を 発生 し ます 。 関数 の 処理 で は 、 
「document.animation.src] に 「ANIMA[1].src」 か ら 「ANIMA[S].src」 の 値 を 設定 し 、 
「setTimeout0」 の 処理 で 再び 関数 を 発生 し て いま す 。「document.animation.src」 に 設定 き 
れる 値 は 「ANIMAI[1].src」 か ら 始 まり 、「ANIMAI[S].src」 ま で くる と 、13 行 目 か ら 15 行 
目 の 処理 で 再び 「ANIMAI1].src」 に 戻り ます 。 こ れ に より 、 ア ニメーション の 処理 は 終 
る こと な く 繰 り 返 され ます 。 

JavaScript1.1 で 追加 され た オブ ジェ クト で す 。 


5 mem フッ ェクト 


| 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta htp-equiv="Content-Script-Type" conten キ =" て ex /]aVvaScr1pt"> 
<meta http-equ1v="Content-Sty]e-Type" content="Eext/Css"> 

< 上 1 上 1e></ 上 1 上 1e> 


<scrip ype="text/avaScr1p"> 


<!ーー 
var TmageSetB = 1: 
ANIMA = new Array() : 


Eh ピ 江 ) 素 で (67 St すり) 【 

ANTMA[1] = new Tmage() : 

ANTMA[i] .src = "image"+ ュ + ".JpP9' : 
} 

function anime_1() { 
document .an1ma1on . 5 エ で 
TmageSetB++: 
if(TmageSetB > 5) { 
TmageSetB = 1: 

} 
setTimeout ( "anime_1() ",500): 
} 

// テ => 

</ SCr1Dt> 


ANTMA [ImageSetB] .SrC: 


<sty1le type="tex 上 /CS8"> 

2 デュ 

body ( background-col1or: #FEFEfF: } 
ーー テ 

</ sty1e> 


</head> 

<body onLoad="an1me_1() "> 
* 画像 を アニ メー ショ ン す る 

< く Dp> 


<1mg Src="1mage1 .pg" name="animation" a]t="Animation" 


width="100" height="100"> 
</p> 

</body> 

</htm1> 
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アニ メー ショ ン に スタ ー ト ボタ ン と 
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回 7e7ox 


oz ブ ブ ジ ェクト 名 = new Image() 
/Z.X dGocurmnent. オ ナブ ジェ クト 名 .src [プロ バ パティ] 
A6.X 
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ォ ア ニメーション に スタ ー ト ボタ ン と スト ッ プ ボタ ン を 付け る 









リル 








プア イル 業 5) 表示 お 気 に 入 D@ ツー- ル ①D 人 2 
@・ の 回 較 ぬ の の we 5m2o 


| * ア ニメーション に スタ ー ト ボタ ン と スト ッ プ ボタ ン を 付け る 

















サン プル で は 、 前 項 の 「 画 像 を アニ メー ショ ン す る 」 で 作成 し た Image オプ ジェ クト の 
配列 を 利用 し て いま す 。 

[スタ ー ト ] ボ タン が 押さ れ た 時 は 、 関 数 [anime_20)」 が 発生 し て Image オプ ジェ クト の 
配列 の 要素 が 呼び 出さ れ 、 ア ニメーション が スタ ー ト し ます 。 [ストップ] ボタ ン が 押 
され た 時 に は 、 関 数 [stop()」 が 発生 し て 、「clearTimeout()」 メ ソ ッ ド に よっ て アニ メー 
ショ ン が 停止 し ます 。 

「clearTimeout(()] メ ソ ッ ド の 設定 は 、「ID 名 =setTimeout()」 と 「setTimeout0」 メ ソ ッ ド に 
ID を 設定 し 、 そ の ID を 「clearTimeout(D 名 )」 と 「clearTimeout())」 メ ソ ッ ド 内 で 指定 する 
こと に より 行い ます 。 

JavaScript1.1 で 追加 され た オブ ジェ クト で す 。 


Et 揚 5 


< く !DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta htp-equ1Y マ ="Conten-Script-Type" content="Eext/]avascript"> 
<meta htED-equiY="ConEent-Sty1e-Type" content="text/css"> 


の 慎 桂 共 計 ツー 上 l 


BN mg オフ ジェ クト 


< 上 1 上 1e></ 上 1 て]e> 


<script type=" ex 上 /]avasCr1pt"> 
<!ーー 
var TimeSet1 = 500: 
Yar TmageSetA = 1: 
ANIMA = new Array() : 
お Q((H 三 1 ょ 式 で (6 3 東 茸 
ANTMA[1] = new Tmage() : 
ANTMA [1] .src = "1image"+ ュ オ ィ ".Jp9": 


} 
function anime_2() { 
document . animation .BrC = ANTMA[ TmageSetA] .SrC: 
TmageSeA++ : 
if( TmageSetA > 5) { 
TmageSetA = 1: Sg7g// 
) ー 
timerTD=setTimeout ("anime_2 ()", TimeSet1 ) : 
} 
function stop() { 
cl1earT1imeout (timerTD) : 
/ / ニ => 
</ scr1pt> 


<sty]e type="text/cCs8"> 

<!ーー 

body { background-co1or: #EEFFfFF: } 
ーー テ 


</ sty1e> 


</head> 
<body> 
* ア ニメーション に スタ ー ト ボタ ン と スト ッ プ ボタ ン を 付け る 
<D> 
<img src="1mage1 . pg" name="an1imation" a1t="Animation" border="0" 
width="100" height="100"> 4 
< く /p> 
<form> 
<input type="button" value=" スタ ー ト " onC1ick="anime_2() "> 
<input type="button" value=" スト ッ プ " onC1ick="stop( ) "> 
< く / Form> 
</body> 
</htm1> 
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画像 に 朋 っ た り ク リッ ク し た 時 に 画像 を 変化 させ る 


ガブ ジ ェクト 名 = new Image( ) 
document. ブ サブジェクト 名 .src [プロ バテ ィ ] 
document.images[ インデックス] 皿 列 ] 
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+ 画 像 に 馬 っ た り ク リッ ク し た 時 に 画像 を 変化 させ る 






当 C:Y5amplesYjeYDin 


の 還 人 の の ws 吉 5moo 
* 画 像 に 骨 っ た り リ ッ ク し た 時 に 画像 を 変化 させ る 

















当 C:Y5amples\js\D1navieator\12imaee\04\index.html 
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+ 画 像 に 財 っ た り ク リッ ク し た 時 に 画 居 を 変化 させ る 


回 回 








サン プル で は まず 、 普 通 の 時 の ボタ ン の 画像 「burton1.jpg]、 マ ウス が 画像 の 上 に 乗っ 
た 時 の 画像 [button2.jpg]、 ボ タン が クリ ッ ク さ れ た 時 の 画像 [buton3.jpg]、 の 3 枚 の 画 
像 を 用 意 し ます 。 そ し て 、「 画 像 を アニ メー ショ ン す る 」(P.456) と 同じ 要領 で 、 そ れ ぞ 
れ の URL の 値 を 持っ た 3 つの 配列 の 要素 を 作っ て いま す 。 

実際 に 画像 を 変化 きせ る の は 、 リ ンク の 中 に 設定 し た イベ ント ハン ドラ で 行い ます 。 
どの 画像 を 変化 さき せる の か は 、HTML ファ イル が 読み 込ま れる の と 同時 に 
「document.images[0]] か ら 始 まる イメ ー ジ 配列 が で き て いる の で 、 そ れ で 指定 する よう 
に し て いま す 。 

上 の 画像 上 に マウ ス が 乗っ た 時 は 、 イ ベン ト ハ ンド ラ 「onMouseOver」 が 関数 
「Setlmage1(2.0)」 を 発生 し て 、「documentimages[0]」 の 位置 の 画像 を 「button2.jpg に 置き 
換え ます 。 マ ウス を クリ ッ ク し た 時 は 、 「onClick="SetImage1(3.0)"] に よっ て 、 
「document.images[0]」 の 位置 の イメ ー ジ を 「button3.jpg に 置き 換え ます 。 マ ウス が 画像 
か ら 離 れ た 時 は 、「onMouseOut="Setlmage1(1.0)"] に よっ て 、「documentimages[0]」 の 
位置 の イメ ー ジ を 「button1.jpg」 に 置き 換え て いま す 。 

また 、 下 の 画像 上 に マウ ス が 乗っ た り 、 ク リッ ク さ れ た り 、 マ ウス が 離れ た 時 は 、 
「documentimages[1]」 の 位置 の 画像 が 置き 換わる よう に 設定 し て いま す 。 

JavaScript1.1 で 追加 され た オプ ジェ クト で す 。 








<!DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTML. 4.01 Transitiona1 / /EN"> 
<htm1> 
<head> 
<meta htp-equ1v="Content-Script-Type" conten キ =" tex 上 /avaSCr1pt 上 "> 
<meta http-equiv="ConEtent-Style-Type" Content="tex 上 /CsS"> 
< キュ 上]1e></ 上 1 上 1e> 
<8C エ ip ype="ex 上 /]avascr1pt "> 
で ニニ 
var BuEttonTmage = new Array() : 
Ho を (ば = お まさ で 4) も PF) { 
ButtonTmage [1]= nevw エ mage( ) : 
ButtonTmage [1] .Src="button" + エナ ".Jpd": 
上 

Function SetTmage1 (Elag, position) { 

documen . 1mage8 [poO81tion] . sr で =BuEonTmage [Fl1ag] .SrCz 
} 
/:/ ラ ニテ 
< く / SCr1p キ > 
<sty1e type="tex 上 /Cs8"> 
に 
body { background-Co1or: #FFEFfFF: } 
ーー テ > 
</ sty1e> 
</head> 
<body> 
* 画像 に 触っ た り ク リッ ク し た 時 に 画像 を 変化 させ る 
<D> 
<a href="#" onMouseOver=" SetTmage1 (2,0)" 
onMouseOut=" Se 上 Tmage1 (1 , 0 ) " onC1ick="SetTmage1 (3 , 0 ) "> 
<1mg src="butEon1 . pg" a1t 上 ="buEEon1" border=0 width="78" J900 
上 = "33"></a> 
く /p> 
<D> 
<a hrefF="#" onMouSeOVer= "Se 上 Tmage1 (2 , 1) " 3 
(1,1)" onC1ick="SetTmage1 (3, 1 ) "> 
<1mg Sro="button1 . pg" a1 ヒ 上 ="butEon2" border=0 width="78" 2 
上 ="33 "></a> 
く /p> 
</Dbody> 
</htm1> 











画像 に 触っ た 時 に 別 の 画像 を 変化 させ る 


オブ ジェ クル 名 = new 1mage() 
document. ガ ブ ジ ェクト た 名 .src [プロ パティ] 
documemt.images[ インデックス] 屯 列 ] 
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アイ ル F) 編集 E) 表示 お 気 に 入 D( ツー ル ① ヘル プ ⑪ 
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+ 画 像 に 触っ た 時 に 別 の 画像 を 変化 させ る 









リネ 3 
左 4mac 










6 8 お た SS4UULEYVTCO64 MEL は 3 


アイ ル (E) 編集 E) 表示 (W) お 気に入り ウール ① ヘル プ (⑪ 
@ 京 ・② 団 還 人 ぬ の 宮 5m20 
+ 画 像 に 豚 っ た 時 に 別 の 画像 を 変化 させ る 












守 C*Samples\js\01navieator\12imaee\D5\mdexhtml-… 選 | 回 | 区 | 
プイ ル (F) 編集 ) 表示 お 気 に 入 D⑯ ツ - ル ①D ルプ ⑪ 


@*・ の 回 国 人 る の ws 広 smop 
* 画 像 に 骨 っ た 時 に 別 の 画像 を 変化 させ る 








「 画 像 に 人 和 朋 っ た り ク リッ ク し た 時 に 画像 を 変化 させ る 」(P.460) と 同じ 要領 で 、 画 像 に 
触っ た タイ ミン グ で 別 の 画像 を 置き 換え る こと が で きま す 。 

サン プル で は 、 イ メー ジ 配 列 「document.images[0]」 の 画像 の 上 に マウ ス が 乗っ た り 、 ク 
リッ ク さ れ た り 、 マ ウス が 離れ た 時 に 、|「document.images[1]」 の 画像 が 置き 換わる よう 
に し て いま す 。 

JavaScript1.1 で 追加 され た オプ ジェ クト で す 。 


-、 旧 


の 
の 


ジ 
を 
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| Sunulr 生還 


<SCrip type="text/]avascCr1pt"> 
く ! ーー 
OnMouse = new Array( ) : 
for(1 = 1: 1 < 5: i++) 人 of 
OnMouse[1] = new Tmage( ) : oz 
OnMouse[1] .src = "image"+ ュ + ィ ".Jpg": ay 
よ 
Function OnMoSet1 (Flag, position) { 
document . images [pos1tion] . src=OnMouse [1ag] . rc: 
return fa]se: 
} 
ーー コシ 
</ SCr1pt> 
て 中 上 略 ー Sa ね 
</head> 話 5-mac 
<body> /E2ac 
* 画像 に 触っ た 時 に 別 の 画像 を 変化 させ る 
ぐ D> 
<a href="#" onMouseOver= "OnMoSet1 (2,1)" 0 RUN 
onC1ick="return OnMoSet1 (4,1) "> 
<img Sro="image1 .Jpg" a1t="onmousea-1" border=0 width="100" 0 
="100"></a> 
<a hrefF="#" onMouseOver= "OnMoSet1 (3 , 0 ) " 12 
onC1ick="return OnMoSet1 (4, 0) "> 
<1img Src="1mage1 .jpg" a1t="onmousea-2" border=0 width="100" RS 
="100"></a> 


い 


座 


</p> 
</body> 









マウ ス 操 作 の タイ ミン グ で 画像 を 置き 換え る 時 の 注意 

Image オブ ジェ クト で は 、 イ ベン ト ハ ンド ラ の 「onClick」「onMouseOver」 
「onMouseOut」 は サポ ー ト され て いま せん 。 

し た が っ て 、 マ ウス が 画像 上 に 乗っ た 時 や 離れ た 時 な ど に 画像 の 置き 換え な どの 
処理 を 行う 場合 、 こ の サン プル の よう に 、Link オ ブ ジ ェクト 内 な ど に イベ ント 八 
ンド ラ を 置く 必要 が あり ます 。 

も し 、 画 像 を クリ ッ ク し た 時 に 違う ペー ジ へ 飛び た く な い 場 合 は 、 こ の サン ブル 
の よう に 、「return false」 を 返し て イベ ント の 処理 を 中 止 さ せる か 、「href= 
"javascript:'] を 使え ば 大 丈夫 で す 。 
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164 Image オプ ジェ クト 








別 フレ ー ム の 画像 を 変化 させ る 


ガブ ブ ジ ェクト 名 = new Image( ) 
document. ナ ブ ジ ェクト 名 .src [プロ パテ ィ ] 
document.images[ イン デック ス ] 配列 
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怒り 顔 ペ ー ジ 








「 画 像 に 触っ た り ク リッ ク し た 時 に 画像 を 変化 させ る 」(P.464) と 同じ 要領 で 、 別 フレ ー 
ム の 画像 を 置き 換え る こと が で きま す 。 そ の 場合 は 、 置 き 換 える 画像 の 指定 は 、「parent. 
画像 の ある フレ ー ム 名 .document.images[ イ ン デ ックス ].src」 と し ます 。 

JavaScript1.1 で 追加 され た オプ ジェ クト で す 。 

実際 に 試す 場合 に は 、 こ の 他 に も 「f3.htmllfpl.html」 -「fp3.htmll の 4 つの HTML ファ 
イル を 用 意 し て くだ さい 。 


ED 所 es 


【 フ レー ムウ ィ ン ド ウ 】 

<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Frameset//EN" > 
<htm]> 

<head> 

< 上 it 上]1e></ 上 it 上 1e> 

</ head> 

<frameset co]s="140,*"> 





<fFrameset rows="140,*"> 
<frame Src="F]1 .htm1" name="F1"> 
<fFrame sro="F2 .htm1" name="F2"> 
< く / FrameSse ヒ > 
<fFrame Src="F3 .htm1" name="F3"> 





</ Framese> 

<noframes> 

フレ ー ム 機能 を 使用 し て いま す 。 フ レー ム 対 応 の プラ ウザ で 試し て くだ さい (^_^) 。 
</nofFrames> 

</htm1l> 


【f1.html】 
<Dbody> 


<1mg src="1mage1 . pg" a1t="OnMouseB-1" width="100" height="100"> 


</body> 


【f2.html 
<SCr1p type="ex 上 /]avasor1p 上 "> 
で ニニ 
OnMouseB = new Array ( ) : 
for(1 = 1 1 < 6: i++ キ ) { 
OnMouseB [1] = new Tmage() : 
OnMouseB [1] .src = "1image"+ ュ エイ ".Jpg": 
} 
function OnMoSet2 (Flag, position) { 
parent . 1 .document . images [position] . sro=OnMouseB [1ag] 
} 
//--> 
</ SCr1pt> 
て 中 略 > 
<body> 
<D> 


・<a href="fp1 .htm1" target="F3" onMouseOver="OnMoSet2(2,0)" onMou 


SeOut="OnMoSet2 (1, 0 ) "> 笑顔 </a> 
く /p> 
<D> 


・<a href="fFp2 .htm1" target="fF3" onMouseOver="OnMoSet2 (3,0)" onMou 


SeOut="OnMoSet2 (1 , 0 ) "> 泣き顔 </a> 
</p> 
< く D> 


・<a href="fFp3 .htm1" target="fF3" onMouseOver="OnMoSet2(4,0)" onMou 


seOut="OnMoSet2 (1, 0 ) "> 怒り 顔 </a> 
く /p> 
で ぐ Dp> 


・<a href="F3 .htm1" target="F3" onMouseOver="OnMoSet2 (5,0)" onMous 


eOut="OnMoSet2 (1 , 0) "> 始め へ 戻る </a> 
< く /p> 
</body> 


・S エ C: 
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ae 
画像 の ロー ド 状 態 を 表示 する 


onAbort=" スク リブ プ ト / 賠 数 " [イベ ント ハン ドラ ] 
onRrror=" スク リブ ム / 閲 数 " [イベ ント ハン ドラ ] 
onLoad=" スク リブ プ ト / 賠 数 " [イベ ント ハン ドラ ] 














1SO ロ 
間 CYSnmplmsWjsY0in Y12imaecY07Windex html 


アイル 編集 表 お 気に入り @⑯ ー ル ①D へ ルプ 0⑬ 
OO 回 回 人 の wm 支 Pwon 


* 画 像 の ロー ド 状 態 を 表示 する 


TDIETTOOAUAITUEILII 


アイ ル び ) 編集 





* 画 像 の ロー ド 状 態 を 表示 す 


[は ー を ロー ド U て いま す イメ ー ジ の ロー ド が 続 了 し まし た 





イベ ント ハン ドラ 「onAbort] は 、 画 像 読み 込み 中 に [中 止 (Stop)] ボ タン が 押さ れる な ど 
で 画像 の 読み 込み が 中 止 き され た 時 に 、 イ ベン ト ハ ンド ラ [「onError」 は 画像 読み 込み エ 
ラー 時 に 、 イ ベン ト ハ ンド ラ 「onLoad」 は 画像 読み 込み 終了 時 に 、 そ れ ぞ れ イ ベン ト を 
発生 し ます 。 

サン プル で は 、 画 像 ファ イル の それ ぞ れ の 状態 を 取得 し 、 そ れ に 合わ せ た メ ッ セ ー ジ 
を フォ ー ム 内 に 書き 出し て いま す 

この サン プル で 、 画 像 の 後に フォ ー ム を 持っ て 来る よう に する と 、 ス クリ プ ト が 機能 
し な い 場 合 が あり ます 。 

JavaScriptl.1 で 追加 され た オプ ジェ クト で す 。 


|Samplo 王 還 

<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1><head> 

<meta htp-equ1v="Content-Soript-Type" content="Eex/]avaSCr1pt 上 "> 
<meta htp-equiY="Content-Sty]1e-Type" content="text/css"> 

< 上 1 上 1e></ 上 1 上 1e> 

<SCr1ipt ype=" ex 上 /]avaScr1pt"> 

で ト ーー 





function STOP( ) { document .ZYOUTAT . zyo .value = "イメ ー ジ の ロー 人 
れ ま し た " } 

function ERR ( ) { document . ZYOUTAT . zyo .Value = 0 
引 二 " 


























Function OK() { document .ZYOUTAT . zyo .value = "イメ ー ジ の ロー ド が 終了 し まし 
誠 " 1 骨 
の ん ー ラ な 
< く / SCr1D キ > 

中略 
</head> 
<body> 
* 画像 の ロー ド 状 態 を 表示 する AMZX_ 
<D> 
<fForm name="ZYOUTAT"> 
<1nput type="Etext" name="zyo" value=" イ メー ジ を ロー ド し て いま す . . ." 1 
="60"> 1 
</ Form> OperaZ 
</p> Opeya6 
く ロ > 
<1mg src="1mage.Jpg" a1t="1mage.]pg" width="400" height="278" onAb af2/7 
ort="STOP ( ) " onError="ERR()" onLoad="OK() "> 骨 5-ma 


</p> /E4-mac 
</body></htm1> 








大 き な 画 像 や フォ ー ム 、 テ ー ブ ル と 
JavaScript を 共存 させ る 時 の 注意 

大 き な 画 像 や フォ ー ム 、 テ ー ブ ル な ど 、 ブ ラウ ザ が レイ アウ ト を 完成 する の に 時 
間 が か か る よう な HTML の 記述 の 後に JavaScript を 記述 し て も 、 ス クリ プ ト が う 
まく 動か な い 場 合 が あり ます 。 

これ は 、 ブ ラウ ザ の レイ アウ ト 確 定 に 邪魔 され 、JavaScript の 認識 が 行わ れ な 
か っ た た め に 起こ る 現象 の よう で す 。 

画像 の 場合 は 、Netscape Navigator 3.0 以 降 の ブラ ウザ を 使っ た こり 、 そ う で 
な く て も 「width] 属 性 と 「height」 属 性 の 指定 を すれ ば 、 画 像 部 分 の レイ アウ ト 確 定 
が 早く 行わ れる の で 、 こ の 問題 は ほぼ 解消 され ます 。 し か し 、 テ ー ブ ル 内 に 
JavaScript を 記述 し た 時 や 、 こ の サン プル の よう に 大 き ね な 画像 の 上 で は な く 、 下 
に フォ ー ム と 組み 合わ せ た JavaScript を 組み 込ん だ 時 な ど に 、 問 題 が 起こ る 場合 
が 多い よう で す 。 | 

これ ら の 問題 は Netscape Navigator 3.0 以 降 の ブラ ウザ で も 発生 する 場合 が 
あり ます が 、Internet Explorer で この よう な 現象 を 確認 し た こと は あり ませ ん 。 
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アイ ル E) 編集 (5 FE お 気に入り ⑳ ツー ル ①D へ ルプ 
@ 率 ・ の 回 国人 の の 正実 sm 
* 画 像 を リロ ー ド する か どう か 確認 する 
この ペー ジ の イメ ー ジ は リン ク が 切れ て いま す 。 









回 mer 









Microsojt nternet Explorer X 


ノル むつ 00-RcNKU ま した. ペー ジ 4 ロー ド し まず DP 


し 衣 し L sr ] 


サン プル で は 、 画 像 の 読み 込み エラ ー 時 に イベ ント を 発生 する イベ ント ハン ドラ 
「onError」 を 利用 し て 、 画 像 が 正常 に 読み 込ま れ な か っ た 時 に 、 ペ ー ジ を リロ ー ド する 
か どう か を 確認 する ダイ アロ グ ボ ックス を 開い て いま す 。 

JavaScriptl.1 で 追加 され た オプ ジェ クト で す 。 


|Somnlc 王 還 


< く 8C エ 1p ype="tex/ avaSCr1pt "> 
< リー ニー 
function ERR2() { 
1f ( confirm ("イメ ー ジ の ロー ド に 失敗 し まし た 。 ペー ジ を リロ ー ド し ます が") ) - 

{ 1ocation .href="08ima.htm1" } 4 
} 
//--> 
< く / SCr1p セ > 

中略 
<body> 
* 画像 を リロ ー ド する か どう が 確認 する 
<p> この ペー ジ の イメ ー ジ は リン ク が 切れ て いま す 。</p> 
<p><1mg Sro="error.]Jpg" a1t="error.]pg" width="474" height="198" 
孔 エ エ O エ = "ERR2 ( ) "></ ロ > 
</body> 


\⑳ confirm0: 「Window オブジェ クト 」 の 「 確 認 ボタ ン 付き の ダイ アロ グ ボ ックス を 開く 」(P.334) 
location.href : 「location オ ブ ジ ェクト 」 の 「 自 ペー ジ の UHL を 取得 する 」(P.408) 
onError : リ ファ レン ス 「 イ ベン ト ハ ンド ラ 」 の 「onError」(P.620) 





alt の 値 を 返す 


document.getEJlementByid( ブ ブ ジ ェクト 名 ).alt [プロ パテ ィ ] 
document.all( ナ ブ ジ ェクト 名 ).alt [プロ パテ ィ ] 


記 C-YSamples\js\D1navigator\12imaee\D9\index htm 


アイ ル (P) 編集) 表示 ⑰) お気に入り) ツー ル D へ ル 2⑪ 


@*・ の 貼る の we 雪 wwoo 


ALTalt の 値 ! 


DOM の 採用 に より 、Intemet Explorer 4.0 と Netscape 6.0 から 、 基 本 的 に HTML タグ の 
あら ゆる 属性 へ 、JavaScript か ら ア クセ モス で きる よう に な り ま し た 。<img> の 「alt」 属 性 
も 、 そ の 中 の ひと つ で す 。 

サン プル で は 、Imnternet Explorer で は 「allO]」 メ ソ ッ ド を 使い 、Netscape で は 
「getElementByIldO)」 メ ソ ッ ド を 使い 、「alul の 値 を 取得 し て いま す 。 


Sample 





<body> 

*a1t の 値 を 返す 

<D> 

<img src="1mage.]pg" 1d="TMG" width="100" height="100" a1t="a1t の 値 !! "> 
< く /p> 

<D> 

<Script type="Etext/]avasCript"> 

も 

document .write ("ALT:") : 

if( navigator . appName . charAt (0 ) =="N" ){ 


if (document . getE]1emenEByTd) (document . write (document uo 
ェ d ( " エ MG" ) .a1t) }) 
} 
if ( navigaor . appName . CharAt ( 0 ) =="M" ) { 

if (document . a11 ) {document . write (document .a11 ("TMG" ) .a1) } 

} 
ニタ 
</ SCr1p> 
く /p> 
</body> 


(⑳ <img alt="> : [画像 と マル チ メ ディ ア 」 の 「 画 像 を 配置 する 」 (P.99) 
付録 コラ ム 「DynamicHTML と は 」 (P.658) 





癌 回 国 可 寺 
に LuILul lu bs 
Ge 雇い Io Io Io 
に 3 ご 3 に 3 (ご 


に 3 
還 
還 


OpeyaZ 


Sa ね /7 


Opeya6 


リネ だ 
圧 4-mac 





の 中 寺 藩 N: 一 メ ユ 人 












Sa ね // 





左 4-mac 


ぶ 慎 圭 落 一 


document.getElementById( ブ ブ ジ ェクト 名 ). agn="7efz / 


2g カ が 


document.al1( ブ ブ ジ ェクト 名 ).a1gn="】efz / r7g77" 


アイ ル ⑥ 編集 (上 お 気に入り ⑳ ウー ル D へ 


OR・ の の の me Pmoo 











[プロ バテ ィ ] 
[プロ パテ ィ ] 


terY12imaeeWi0Yinderhtml 


イル 編入 6) 表示 お 気に入り (A) ウール ①D AM2⑪ 礎 


@ ま の 回 国人 の の 宮 5m 





+ 画 像 と テキ スト の 横 の 位置 問 係 を 変更 する 


All Work And No Play Mgkes Jack A Dull Boy All Work Ard No 
Plsy Makes Jack A Dull Boy All Work Ard No Play Makas 
Jack A Dul Boy Al Work And No Plsy Makes Jack A Dull Boy 


AM Work And No Play Mekes Jack A Dull Boy 
Al Work And Ns Py Mgkes Dul Bo 
All Work And No Play Mgkes っ 
Al Work And No Plsy Mgkes ul By 
AM Work And No Plsy Mgkes ul Bo 
All Work And No Pay Mgkes Jack A Dull Boy 


All Work And No Play Mekes Jack A Dull Boy Al Work And Ne 
Play Makes Jack A Dull Boy Al Work Ard No Play Makes 
Jack A Dull Boy All Work And No Play Makes Jack A Dull Boy 
All Work Ard No Play Mskes Jack A Dull Boy Al Work Ard Ne 
Play Makes Jack A Dull Boy Al Work Ard No Play Makes 
Jack A Dull Boy Al Work And No Pay Makes Jack A Dull Boy 


+ 画 像 と テキ スト の 横 の 位置 間 係 を 変更 する 


All Work And No Pay Mskes Jack A Dull Boy AllWork Ard Ne 
Plgy Makes Jack A Dull Boy All Work And No Plsy Makes 
Jack A Dul Boy Al Work And No Play Mgee Jack A Dull Boy 
Al Work And No Play Makes Jack A Dull Boy 

Al Work And No Plsy Mskes Jack A Dull Boy 

Al Work And Ns Play Mekes Jack A Dull Boy 

Al Work And No Plsy Makes Jack A Dull Boy 

Al Work And No Plsy Makes Jack A Dull Boy 

All Work Amd No Py Makes Jack A Dull Boy 

Al Work And No Play Makes Jack A Dull Boy All Work And No 
Py Makes Jack A Dull Boy All Work And No Plsy Malee 
Jack A Dull Boy All Work And No Play Mgkes Jack A Dull Boy 
All Work And No Play Makes Jack A Dull Boy Al Work And No 
Plsy Makes Jack A Dull Boy. Al Work And No Pay Maks 
Jack A Dull Boy All Work And No Plsy Mekes Jack A Dull Boy 





mlit 四葉 





サン プル で は 、DOM の 採用 に より <img> の 「align 属性 が 操作 で きる よう に な っ た こと 
を 利用 し て 、 画 像 に 対す る テキ スト の 横 の 位置 関係 を 変更 し て いま す 。 

な お 、 サ ンプ ル で は 、Interet Explorer の 4.X と それ より 後 の バ パー ジョン で の DOM の 
実装 の 違い を 考慮 し て 、「getElementById()」 メ ソ ッ ド と 「all)」 メ ソ ッ ド の どちら を サ 
ポー ト し た ブラ ウザ で も 、 対応 で きる よう に し て いま す 。 

[ 右 へ !] ボ タン を クリ ッ ク す る と 関数 「AlisgnRight()」 が 発生 し 、「document. 
getElementById("IMG").align="right | か 「document.all("TMG").align="left'| が 評価 され 、 
「align」 に 「right」 の 値 が 設定 され 、 画 像 が 右 へ 移動 し ます 。 同様 に 、[ 左 へ !!] ボ タン を 
クリ ッ ク し た 時 は 関数 「AlignLeftO」 が 発生 し 、「align」 に 「left」 の 値 が 設定 され る の で 、 
画像 は 右 へ 移動 し ます 。 


| Samplc 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm1l> 

<head> 

<meta htp-equ1v="Content-Socript-Type" content="tex/]avascr1p 上 "> 
<meta http-equ1v="Content-Sty]1e-Type" conten ヒ ="Eext/Cs8"> 

< 上 1 上 ]e>< / 上 1 上 1e> 





<SCript type="text/avaScr1pt"> 
コ ご 


Function AlignLeft( ) { 


470 mm ォ フ タ ェ クト 


3 
gn="1eE も "} 

1f (document . a11 ) {document .a11 ("TMG" ) .a11gn="1eE モ "] 
} 


Function AlignRight( ) { Frefox 
1f (document .getE]ementByTd ) {document . getE1ementByTd ( "TMG" ) Moz/a 

gn="right") AZ.X 
if (document .a11 ) {document .a11 ("TMG" ) .a1ign=" ェ ight" }) _W6.X. 


} 
//--> 
</ SCr1p セ > 





<style type="Eext/css"> 

マト 

body { background-co1or: #EFFFFf: } 
ーー テ > 


</ style> 


</ head> 
<body> 
* 画像 と テキ スト の 横 の 位置 関係 を 変更 する 
<h エ > 
A11 Work And No Play Makes Jack A Du11 Boy. A1] Work And No Pl]ay 
Makes Jack A Du11] Boy. A11 Work And No Play Makes Jack A Du11 Boy. 
A11 Work And No Play Makes Jack A Du1] Boy. <img 1qd="TMGr 
a1ign="1eft" src="1image.]pg" width="100" height="100" 
a1t="a1ign">A11 Work And No Pl]ay Makes Jack A Du11 Boy. A11] Work 
And No Pl]ay Makes Jack A Du11 Boy. A11 Work And No Play Makes Jack 
A Du11 Boy. A11 Work And No Pl1ay Makes Jack A Du11 Boy. A11 Work 
And No Play Makes Jack A Du11 Boy. A11] Work And No Play Makes Jack 
A Du11 Boy. A11 Work And No Play Makes Jack A Du11 Boy. A11 Work 
And No Pl]ay Makes Jack A Du11 Boy. A11] Work And No Play Makes Jack 
A Du11 Boy. A11 Work And No Play Makes Jack A Du11 Boy. A11 Work 
And No Play Makes Jack A Du11 Boy. A11] Work And No Play Makes Jack 
A Du11 Boy. A11 Work And No Pl]ay Makes Jack A Du1] Boy. A11] Work 
And No Play Makes Jack A Du11 Boy. 
<hr> 
<form name="FORM"> 
<1nput type="butEton" value=" 左 へ !!" onC1ick="A1ignLeft ( ) "> 
<1nput type="button" value=" 右 へ !!" onC1ick="A1ignRight ( ) "> 
</ Form> 
</body> 
</htm1> 














⑫ 





画像 と テキ スト の 縦 の 位置 関係 を 変更 する 





末 則 六 

1 
財団 回 
こい トー】 


/E4.0 document.getElementById( ブ ブ ジ ェクト 名 ). aHign="7op / 
dd7e / pozorn" [プロ パテ ィ ] 


fref 

irefox ent.al1( オ ブ ジ ェクト 名 ).aHgn="】eft / rghf' [ブロ パテ ィ ] 
arm 

W6.X 






+ 画 像 と デキ スト の 終 の 位置 間 係 を 変更 する 


Al Work 貞 And No Play Makes Jack A Dull Boy 











Al Work 山 And No Play Makes Jack A Dull Boy 


CC 





DOM の 採用 に より 、 ブ プラ ウザ の より 細か い 部 分 を 、 動 的 に 変更 する こと が で きる よう 
に な り ま し た 。 

サン プル で は 、 ボ タン クリ ッ ク の タイ ミン グ で F「alisgn」 に それ ぞ れ の 値 を 設定 する こと 
に より 、 画 像 に 対す る テキ スト の 縦 の 位置 関係 を 動 的 に 変更 し て いま す 。 

「top」 の 値 を 設定 し た 時 は 画像 の 上 と テキ スト の 上 を 、「middle」 の 値 を 設定 し た 時 は 画 
像 の 中 心 と シテ キス ト の ベー スラ イン を 、「bottom」 の 値 を 設定 し た 時 は 画像 の 下 と テキ 
スト の ベー スラ イン を 、 そ れ ぞ れ 揃 えま す 。 

な お 、 サ ンプ ル で は 、Imtemet Explorer の 4.X と それ より 後 の バ ー ジ ョ ン で の DOM の 
実装 の 違い を 考慮 し て 、「getElementById()」 メ ソ ッ ド と [all()」 メ ソ ッ ド の どちら を サ 
ポー ト し た ブラ ウザ で も 、 対応 で きる よう に し て いま す 。 


EYE 利 HL__ 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm1> 

<head> 

<meta htp-equ1v= "Content-Socr1ipt-Type" conten ヒ ="text/ avaSCr1pt"> 
<meta htp-equ1v="Content-Sty1e-Type" conten="Eext/CsS"> 





中 寺 藩 Ni 一 上 l 


2 mee オラ ジ ェクト 








< 上 it1e></ 上 it1e> 


<SCript type="ext/avaSC エ ip 上 "> 
に っ 1 は ココ 
Function A]1ignTop( ) { 
1f (document . getE1ementByTd) {document .getE1ementBy エ Td ("TMG" ) coAW 
gn="top"} 
if (document .a11 ) { document .a11 ("TMG" ) .a1ign= "top"} 
Function A1ignMidd1i ( ) { 
if (document .getE1ementByTd) {document . getE1ementByTd ( "TMG" ) ES 
gn="midd1e"} 
1f (document .a11 ) (document .a11 ("TMG" ) .a11gn="midd1e"} 
} 
function A1ignBottom( ) { 
1f (document .getElementByTd) {document .getE1 ementByTd ("TMG" ) 
gn="bottom" } 
1f (document .a1 1 ) { document .a11 ( "TMG" ) .a11gn="bottom"} 
} 
// --> 
</ SCr1p キ > 


<sty1e type="text/ocss"> 

で りー ニ 

jbody { background-co1or: #EEFFfFF: } 
ーー> 

</sty1e> 


</head> 

<body> 

* 画像 と テキ スト の 縦 の 位置 関係 を 変更 する 

<D> 

A11] Work <img 1d="TMG" a1ign="middle" src="image.Jpg" width="100" 骨 

height="100" a1t="a1ign"> And No Pl]ay Makes Jack A Du11] Boy. 

く /p> 

<D> 

<fForm name="FORM"> 
<input type="button" value="A1ignTop" onC1ick="A1ignTop ( ) "> 
<input type="button" value="A11igMnidd1er 2 

(9 

<1input type="button" value="A1ignBottom" 2 

(090 ウ 

</ form> 

く /p> 

</Dody> 

</htm1> 
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ぶ 圭 革 NN 一 ユ 用 


画像 の 高 さ と 幅 を 変更 する 


document.getElementByTd( ブ ブ ジ ェクト 名 ).height= "ピク セル " 
[プロ パテ ィ ] 


document.getEElementById( オ ブ ジ ェクト 名 ).width= "ピク セル " 
[プロ パテ ィ ] 

document.al1( ブ ブ ジ ェクト 名) .height= "ビク セル " [プロ パティ] 

document.al1( ナ ブ ジ ェクト 名 ).width= "ピク セル " [プロ バテ ィ ] 
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Intemet Explorer で は 、 以 前 か ら 画 像 の サイ ズ を 動 的 に 変更 する こと が 可能 で し た が 、 
Netscape Navigator で も 、DOM が 採用 され た Netscape 6.0 か ら 可 能 に な り ま し た 。 

サン プル で は 、 ボ タン クリ ッ ク の タイ ミン グ で 関数 を 発生 させ 、 関 数 内 の 処理 で 「height] 
プロ パテ ィ や 「width] プ ロ パ ティ の 値 に 数 値 を 設定 する こと に よっ て 、 画 像 の 高 さ や 幅 
を 動 的 に 変更 し て いま す 。[ 高 さ 変更 !] ボ タン を クリ ッ ク す る と 画像 の 高 さ が 200 ビク 
セル に 、[ 幅 変更 !] ボ タン を クリ ッ ク す る と 画像 の 横幅 が 200 ピク セル に な り ま す 。 ま 
た 、[ 戻 す ]] ボ タン を クリ ッ ク す る と 、 画 像 の 高 さと 幅 が 、 そ れ ぞ れ の 初期 状態 の 100 
ピク セル に な り ま す 。 

な お 、 サ ンプ ル で は 、Intemet Explorer の 4.X と それ より 後 の バ パー ジョ ン で の DOM の 
実装 の 違い を 考慮 し て 、「getElementById()」 メ ソ ッ ド と [all(O)」 メ ソ ッ ド の どちら を サ 
ポー ト し た プラ ウザ で も 、 対応 で きる よう に し て いま す 。 





7 mew オ ラジ ョ クト 





EE 王 暗 LRUOTobob ふ つっ uo 主 ッ ーー /E6.0 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> /E5.5 
<htm1> /E5.0 
<head> /2.0 
<meta htEp-equ1v="ConEent-Script-Type" content="tex 上 / avaSCr1pt"> 
<meta http-equiv="Content-Style-Type" conten="tex 上 /cs8"> PP 
< 上 1 上 1e></ 上 1 上 1e> 
<8oript type="text/]aVaSscr1pt"> AZ.X 
3 6.X 
function TmgHeight() { 

if (document . getElementByTd) {document .getE1ementByTd ( "TMG" ) 。 前 
height = "200"} 

if (document .a11 ) {document .a11 ( "TMG" ) .height = "200"} 


万 /e7ox 


} 
function TmgWidth() { 

if (document .getE1ementByTd) {document . getE1ementByTq ( "TMG" ) . 和 
width = "200"} 

1f (document .a11 ) {document .a11 ( "TMG" ) .width = "200") 
} 
function Replace( ) { 

if (document .getE1ementByTd ) {document .getE1ementByTd ("TMG" ) . 内 
height = "100『: 

document .getE1ementByTd("TMG" ) .width = "100": 
} 
if (document .a11 ) {document .a11 ( "TMG" ) .height = "1009: 
document .a11 ("TMG" ) width = "100": 


} 

ニー ニテ 

</ Script> 

</head> 

<body> 

* 画像 の 高 さと 幅 を 変更 する 

<cCenter> 

<P> 

<form> 
<input type="button" value=" 高 さ 変更 !!" onC1ick="TmgHeight ( ) "> 
<input type="button" value=" 幅 変更 !!" onC1ick="TmgWidth( ) "> 
<1nput type="button" value=" 戻 す " onC1ick="Rep1ace( ) "> 

</ Form> 

< く /p> 

<1mg Sro="1mage.〕pg" 1d="TMG" a]t="image. pg" width="100" height="100"> 

</ Cen ヒ e エ > 

</body> 

</htm1> 








レイ ヤー の 情報 を 取得 する 


【 オ ブ ジ ェクト 】 


document.1layerS[ ブ ブ ジ ェクト 名 ] 
document.1ayerS. ブ ブ ジ ェクト 名 
document. ガ ブ ジ ェクト 名 
document.1layers[ インデックス] 





ミ 
< 


document.layers[ オ ナブ ジェ クト 名 ].name [プロ パテ ィ ] 
document.1layers[ ナ ブ ジ ェクト 名 ].1eft [プロ パテ ィ ] 
document.1ayers[ オ ガブ ジェ クト 名 ].top [プロ パテ ィ ] 
document.1ayers[ オブジェ クト 名 ].page 双 [プロ バ パティ] 
document.1iayers[ オ ブ ジ ェクト 名 ].pageY [プロ パテ ィ ] 
document.layers[ オブ ジェ クト 名 ].zIndex [プロ バテ ィ ] 
document.layers[ オ ブ ジ ェクト 名 ].visibility [プロ パテ ィ ] 


* レ イヤ ー の 情報 を 取得 する 
オブ ジェ クト 名 : LAY1 


dex の 値 :1 
レイ ヤー の 可視 属性 : nherit 


の t 土 秒 ※ー さ へ で MI 





Layer オプ ジェ クト は document オ プ ジ ェ クト の プロ パテ ィ な の で 、 オ プ ジ ェ クト の 参 
照 は 、 サ ンプ ル の よう に 「documentlayers[ オ プ ジ ェ クト 名 ]」「documentlayers. オ プ ジ ェ 
クト 名 [document. オ プ ジ ェ クト 名 ]、 ま た は オプ ジェ クト を 配列 と し て 取り 扱っ て 
「document.layers[ イ ン デ ックス ]] と する こと に より 可能 で す 。 

Iname」 プ ロ パ ティ は <layer> 内 の 「name」 属 性 で 設定 し た layer オブ ジェ クト 名 を 、「left」 
プロ パテ ィ は ペー ジ あ る い は 親 レイ ヤー の 左上 角 か ら の レイ ヤー 左上 角 の XX 軸 上 の 位 
置 の 値 を 、「top] プ ロ パ ティ は ペー ジ あ る い は 親 レ イヤ ー の 左上 角 か ら の レイ ヤー 左上 
角 の X 軸 上 の 位置 の 値 を 、「pageX」 プロパ ティ は ペー ジ 左 上 角 か ら の レイ ヤー 左上 角 
の XX 軸 上 の 位置 の 値 を 、「pageY]」 プ ロ パ ティ は ペー ジ 左 上 角 か ら の レイ ヤー 左上 角 の Y 
軸 上 の 位置 の 値 を 、|「zIndex] プロ パテ ィ は レイ ヤー の 軸 上 の 値 を 、「visibiliry」 プ ロ パ 
ティ は レイ ヤー の 可視 属性 の 値 を 、 そ れ ぞ れ 持っ て いま す 。 


6 mw オプ ジェ クト 


親 レイ ヤー の 場合 は ペー ジ 左 上 角 か ら の 位置 を 参照 する の で 、「leftl」 プ ロ パ ティ と 
「pageX」 プ ロ パ ティ 、「top]」 プ ロ パ ティ と 「pageY」 プ ロ パ ティ の 値 は 同じ に な り ま す 。 ま 
た 、 サ ンプ ル で は 、 レ イヤ ー に 可視 属性 を 設定 し て いな い の で 、 親 レイ ヤー の 可視 属 
性 に 準ずる 「inneril の 値 が 返り ます 。 

これ ら の プロ パテ ィ は 変更 可能 な の で 、 ペ ー ジ 表示 後に これ ら の 値 を 変更 する こと に 
より 、 レ イヤ ー を 移動 し た り 、 可 視 属性 を 変化 する こと が 可能 で す 。 
Layer オプ ジェ クト は 、Netscape Navigator 4.X の み で サポ ー ト され て いま す 。 


間 和 ee 


<htm1l> 

<head> 

<meta http-equiv="Content-Script-Type" conEent="text/]avaScr1pt"> 
< 上 it1e></ 上 it1e> 

</head> 

<body bgco1or="#FFFFFF"> 

* レイヤー の 情報 を 取得 する 

<1ayer name="LhAY1" 1eft="200" top="50" width="200" height="150" z- 
index="1" bgco1or="#99FFcc"> 

<b>LAY1</D> 

</ 1ayer> 

<D> 

<script type="ext/]aVvascript"> 

デニ 

document .write ("オブ ジェ クト 名 : " , document .1ayers["LAY1"] .name) : 
document .write ("<br>" ) : 

document .write( "画面 左 か ら の 位置 : ", document .1ayers .LAY1 .1eft) : 
document .write ("<br>" ) : 

document .write( "画面 上 か ら の 位置 : ", document .LAY1 .top) 

document .write( "<br>" ) : 

document .write( "画面 左 か ら の 位置 : ", document .1ayers [0] .pageX) : 
document .write( "<Dr>" ) : 

document .write( "画面 上 か ら の 位置 : ", document .1ayers ["LAY1"] .pageY) : 
document .write ("<br>" ) : 

document .write("z-Tndex の 値 : ",document .1ayers [ "LAY1"] .zTndex) : 
document .write ( "<br>" ) : 

document .write ("レイ ヤー の 可視 属性 : " , document .1ayers["LAY1"] | 
tyY) : 

(ニニ な 

</ script> 

く /p> 

</body> 

</htm1l> 











子 レ イヤ ー の 情報 を 取得 する 


【 オ ブ ジ ェクト 】 

document.1ayers[ オ ブ ジ ェクト 名 ].1ayers[ オ ブ ジ ェクト 名 ] 
Gocument.1ayers. ブ ガブ ジ ェクト 名.1layers. オ ナブ ジェ クト 名 
Gocument.1ayers[ イン デック ス ].1ayers[ インデックス] 


W4.06 
AM2.X 


Gocument.1ayers[ 親 レイ ヤー 名 ].1ayers[ デ レイ ヤー 名 ].name 

[プロ バテ ィ ] 
document.1ayers[ 親 レイ ヤー 名 ].1ayers[ ア レイ ヤー 名 ].1eft 

[プロ バ パティ] 
docuument.1ayers[ 親 レイ ヤー 名 ].1ayers[ ア レイ ヤー 名 ].top 

[プロ パテ ィ ] 
docunment.1ayers[ 親 レイ ヤー 名 ].1ayers[ ア レイ ヤー 名 ].pageX 

[プロ バ パティ] 
document.1ayers[ 親 レイ ヤー 名 ].1ayers[ ア レイヤー 名 ].pageY 

[プロ バテ ィ ] 
docunment.1ayers[ 親 レイ ヤー 名 ].1ayers[ ア レイ ヤー 名 ].zTndex 

[プロ バ パティ] 
document.1ayers[ 親 レイ ヤー 名 ].1ayers[ ア レイ ヤー 名 ].visibility 

[プロ バ パティ] 





ぶ + 桂 洪 キ ー さ へ で 


50 
画面 上 か ら の 位置 :100 
z-jndex の 値 : 1 
レイ ヤー の 可視 属性 : show 





ネス ト さ れ た 子 レ イヤ ー の 参照 は 、 サ ンプ ル の よう に 「document.layers[ 親 レイ ヤー 
名 ].layers[ 子 レイ ヤー 名 ]」「document.layers. レ イヤ ー 名 .layers. レ イヤ ー 名 ] ま た は 
「document.layers[ イ ン デ ックス ].layers[ イ ン デ ックス ]」 と する こと に よっ て 可能 で す 。 
子 レ イヤ ー の 場合 は 、「lefj] プ ロ パ ティ と 「top] プ ロ パ ティ は 親 レイ ヤー 左上 角 を 基準 と 
し た 、「pageX」 プロパ ティ と 「pageY」 プ ロ パ ティ は ペー ジ 左 上 角 を 基準 と し た レイ ヤー 
の 位置 の 値 を 、 そ れ ぞ れ 持っ て いま す 。 

Layer オプ ジェ クト は 、Netscape Navigator 4.X の み で サポ ー ト され て いま す 。 
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| 


<htm1> 
<head> 
<meta http-equiv="Content-Socript-Type" ConEent="Eext / avaSC エ 1pt"> 
< 上 1 上 1e></ 上 1 上 1e> 
</head> 
<body bgco1or="#EFFFFF"> 
* 子 レイ ヤー の 情報 を 取得 する 
<1ayer name="LAY1" ]eft="200" top="50" width="200" height="150" 
index="1" bgco]or="#99EFco"> 
<1ayer name="LAY2" 1eft="50" top="50" width="100" height="50" 
gz-1ndex="1" yisib1i11ty="Show" bgco]1or=" 提 FEFFFCC"> 内 
<b> 子 レイ ヤー </b> 
</ 1aye エ > 
</ 1aye エ > 
<D> 
<scrtpt type="text/]avaSsCr1Dpt"> 
に 
document .write ("オプ ジェ クト 名 : " ,document .1ayers [ "LAY1"] SO 
*] .name) : 
document .write( "<Dbr>" ) : 
document .write( " 親 レイ ヤー 左 か ら の 位置 : " 人 
Y2 .1eft ) : 
document .write ("<Dr>" ) : 
document .write( " 親 レ イヤ ー 上 か ら の 位置 : ",document . 1ayers [0] .1ayers[0] 2N 
Op) : 
document .write ("<Dr>" ) : 
document .write ( "画面 左 か ら の 位置 : ",document .1ayers[ "LAY1"] .1ayers["LAY 
2"] .pageX) : 4 
document .write ("<br>" ) : 
document . write ( "画面 上 か ら の 位置 : " ,document .1ayers["LAY1"] .1ayers["LAY 
2"] .pageY) : 4 
document .write ("<br>") : 
document .write("z-Tndex の 値 : ",document .1ayers[ "LAY1"] .1ayers["LAY2 
"] .zTndex) : 4 
document .write ("<br>" ) : 
document .write ("レイ ヤー の 可視 属性 : " ,document .1ayers [ "LAY1"] SI 
AY2"] yis1ib111) : 
が / ニ ニテ 
</ Cr1pt> 
</p> 
</body> 
</htm1> 








に 












レイ ヤー 上 の どこ で イベ ント が 発生 し た か を 取得 する 


イベ ント .layer 区 符 レ イヤ ー 上 の x 軸 の 値 [プロ バテ ィ ] 
イベ ント .layer を レイ ヤー 上 の rY 軸 の 値 [プロ バテ ィ ] 
ブ ブ ジ ェクト た .onmousedown = "スク リプ ト / 尉 数 " [イベ ント ] 













* レ イヤ ー 上 の どこ で イベ ント が 発生 し た か を 取得 する 


event オ プ ジ ェ クト の [layerX] プ ロ パ ティ と 「layerY]」 プ ロ パ ティ は 、 イ ベン ト が 起こ っ 

た レイ ヤー 上 の X 軸 と Y 軸 の 値 を 持っ て いま す 。 

サン プル で は 、 レ イヤ ー 上 で マウ スポ ボタ ン が 押さ れ た 時 に 、 イ ベン ト タ イ プ 「document. 

onmousedown」 に よっ て イベ ント が 取得 され て 関数 [eve10」 を 発生 し 、 イ ベン ト が 持っ 

て いる マウ スカ ー ソ ル の ウィ ンド ウ と レイ ヤー 上 の 位置 の 値 を 警告 用 の ダイ アロ グ ボ ッ 
ス に 表示 し て いま す 。 

Layer オプ ジ ェクト は 、Netscape Navigator 4.X の み で サポ ー ト され て いま す 。 


和 和 2em 


<html> 

<head> 

<meta htp-equiv="Content-Script-Type" ConEent="text/]avascript"> 
< 上 it 上 1e></ 上 11e> 

</head> 

<body bgco]1o エ ="# 上 下條"> 

* レ イヤ ー 上 の どこ で イベ ント が 発生 し た か を 取得 する 

<1ayer name="LAY1" Visibi1ity="show" bgco1or="b1ue" top=50 1eft= 
100 width=200 height=150> 骨 


く SC エ 1p ype=" て ex 上 /avascr1ipt"> 
に に 
function eve1(e) { 
al1ert ("イベ ント "+e.type +" が 発生 し まし た " + "\n"' + 
"ウィ ンド ウ の XX 座標 :" + e.pagex + "nm" + 
"ウィ ンド ウ の Y 護 標 :" + e.pageY + " き n" + 


90 ta オラ ジェ クト 





"レイ ヤー の 座標 :" + e.1ayerX + "\n' + 
"レイ ヤー の Y 座 標 :" + e.1aye ェ Y) : 
GEurn 上 エエ UGz 
} 
documen . onmouSsedown = GeVe1: 4 
が ニニ ジ 
< く / SCr1D キ > 


</ 1aye エ > 
</ body> 
</htm1> 













レイ ヤー の 全 後 

レイ ヤー は 、Netscape Navigator 4.0 か ら 追加 され た 機能 で 、 コ ン テ ン ツ の 
位置 や 重なり な ど を 細か く 設 定 す る こと が で きま す 。 

元々 は 、W3C で CSS の 仕様 が まだ 決定 され て いな い 時 期 に 、Netscape 社 が 
CSS の 仕様 と し て 提案 し て いた 規格 で し た が 、 そ の 後 CSS の 仕様 が 確定 し た 時 に 
は 、 レ イヤ ー は そこ に は 含ま れ て いま せん で し た 。 こ の た め レ イヤ ー は 、Netscape 
Navigator の 独自 規格 と な っ て し まっ た の で す 。 

これ を 受け て 、 標 準 仕様 の 完全 準拠 を 目指 し て 開発 が 進め られ て いた Mozilla で 
は 、 レ イヤ ー の サポ ー ト を 取り や め る こと に な り 、Mozilla を 元 に 作ら れ た Netscape 
6.X で も 採用 され て いま せん 。 そ し て 、 お そら く 今 後 も 、 レ イヤ ー が 再び 採用 され 
る こと は な いと 思わ れ ま す 。 

確か に Netscape Navigator 4.X で は CSS の サポ ー ト が 中 途 半端 で 、 コ ン テ ン 
ツ の 位置 や 見 映え を 細か く 設 定 し た ペー ジ を 作る の は 、 な か な か 大 変 で す 。 し か し 、 
今後 レイ ヤー を サポ ー ト し た ブラ ウザ は 出 て こない で あろ うこ と や 、Internet 
Explorer を 始め と し た ブラ ウザ の CSS 対応 が 一 般 的 に な っ て 来 て いる こと を 考え 
る と 、 今後 は 、 レ イヤ ー で は な く CSS を 使っ た 方 が よい で し ょ よう 。 
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スタ イル シー ト の 情報 を 取得 する 

document.a1( オ ナブ ジ ェクト 名 ).style.1eft [プロ バテ ィ ] 
document.al1( ブ ナブ ジェ クト 名 ).style.top [プロ パテ ィ ] 
document.all( ブ ブ ジ ェクト 名).style.width [プロ バ パティ] 
document.a11( オ ブ ジェ クト 名).style.height [プロ パテ ィ ] 


三 
の 
に 


document.getElementById( ブ オブジェ クム 名 ).style.1eft [プロ バ パティ] 
document.getEilementById( オ ブ ジ ェクト 名 ).style.top [プロ バテ ィ ] 
document.getEBlementById( オ ブ ジ ェクト る ).style.width 


三 
ト ol 
に 3 




















OpeyaZ [プロ パテ ィ ] 
Opera6 document.getElementById( ブ ブ ジ ェクト る ).style.height 
で [プロ パテ ィ ] 
am document.1ayers[ オ ブ ジ ェクト る ].1eft [プロ バテ ィ ] 
寿 4.mac document.layers[ ブ ガブ ジェ クト 名 ].top [プロ バ パティ] 
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スタ イル シー ト の 各種 の 値 は 、Intermet Explorer で は 「document.all( オ プ ジ ェ クト 名 ) 
.style. プ ロ パ ティ 」 で 、Netscape Navigator 4.X で は レイ ヤー と 同じ 「document.layers[ オ 
プ ジ ェ クト 名 ]. プ ロ パ ティ 」 で 、Netscape 6.0 以降 で は 「document.getElementById( オ ブ 
ジェ クト 名 ).style. プ ロ パ ティ 」 の 用 法 で 取得 可能 で す 。 

サン プル で は 、 ま ず Intemet Explorer か Netscape Navigator か の 判断 を 行っ て いま す 。 
そし て 、 プ ラウ ザ が TIntemet Explorer だ っ た 場合 は 、「documentLall( オ ブ ジ ェクト 名 )」 を 
使っ て スタ イル シー ト の 値 を 取得 し て いま す 。 ま た 、 プ ラウ ザ が Netscape Navigator 
だ っ た 場合 は 、 さ ら に Netscape 6.0 な どの DOM に 対応 し た プラ ウザ か 、 レ イヤ ー に 対 
応 し た Netscape Navigator 4.X の プラ ウザ か の 判断 を 行い ます 。 そ し て 、 そ れ ぞ れ に 合 
わせ て 、DOM に 対応 し た プラ ウ ザ は 「document.getElementByIld( オ プ ジ ェ クト 名 )」 を 、 
レイ ヤー に 対応 し た プラ ウザ は 「qdocument.layers[ オ プ ジ ェ クト 名 ]| を 使っ て スタ イル 
シー ト の 値 を 取得 し て いま す 。 


3 z タ イル シー ト 


[leftl プロ パテ ィ は ウィ ンド ウ の 表示 領域 ある い は 親 ス タイ ル シ ー ト 左上 角 か ら の ス 
タイ ル シ ー ト 左上 角 の 位置 の 値 を 、「top]」 プ ロ パ ティ は ウィ ンド ウ の 表示 領域 ある い は 
親 ス タイ ル シ ー ト 左上 角 か ら の スタ イル シー ト 左 上 角 の 位置 の 値 を 、「wiqth] プ ロ パ 
ティ は スタ イル シー ト の 横幅 の 値 を 、「heishtl プロ パテ ィ は スタ イル シー ト の 高 さ の 値 
を 、 そ れ ぞ れ 持 っ て いま す 。 な お 、「document.layers[ オ プ ジ ェ クト 名 ]」 で 得 ら れる 値 は 
数 値 、「document.all( オ プ ジ ェ クト 名 )」 や 「document.getElementByld( オ ブ ジ ェクト 名 )] 
で 得 ら れる 値 は 文字 列 と な り ま す 。 

サン プル で は 紹介 し て いま せん が 、Internet Explorer 3.0 以降 で は 、「document. 
getElementByIld( オ プ ジ ェ クト 名 )」 の 用 法 も 使用 可能 で す 。 ま た 、 サ ンプ ル の よう に テ 
キス ト の み の ス タイ ル シ ー ト で は 、Netscape Navigator 4.X で は スタ イル シー ト の 幅 や 
高き の 値 を 取得 する こと が で きま せん 。 

な お 、<meta> を 入れ て し まう と 、Netscape Navigator 4.X で は テキ スト の み の ス タイ ル 
シー ト が 表示 され な い 場 合 が ある の で 、 サ ンプ ル で は <meta> を 省略 し て いま す 。 


和音 


<htm1> 
<head> 
< 上 it1e></ 上 1t]e> 


<sCript type="text/]avaSCr1pt"> 
<!ーー 
function StyVa1lue( ) { 
if (navigator . appName . charAt ( 0 ) =="M" ) { 
if (document .a11 ) { 
a1ert( "画面 左 か ら の 位置 : "+document .a11 ("STY1") 
"学生 " 十 
"画面 上 か ら の 位置 : "+document .a11 ("STY1") 科す コ 
"mn" 二 
"横幅 : "+document .a11 ("8TY1" ) . sty1e .w1dth+"\ ロ リオ 
" 高 さ : "+document .a11 ("8TY1" ) . sty1e.hetght) : 
} 
} 
if (navigator . appName . charAt ( 0 ) =="N" ) { 
if (document .getElementByTd) { 
alert( "画面 左 か ら の 位置 : "+document .getE1ementByrd ("8TY1" ) 
.8tyle . ef 上 +"\n"+ 通 | 
"画面 上 か ら の 位置 : "+document .getE1ementByTd ("8TY1" ) 還 
・8ty1e .EOp+" ぎ ロリ キ 
"横幅 : 生生 
dth+" ぎ nm" 二 
" 高 さ : "+document . getE1ementByTd ("STY1" ) . Eo 和 
ight ) 
} 
if (document . 1ayers) { 
alert ( "画面 左 か ら の 位置 : "+document . 1ayers[ "8TY1"] .1eE モ +"\n" 二 
"画面 上 か ら の 位置 : "+document .1ayers["8TY1"] .top) : 


frefox 
Moz/a 


Ope/a6 
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} 
} 
7 ヨン 
</ SCr1D キ > 


<style type="Etext/css"> 

マリ ーー 

body { background-co1or: #FFFFFF: } 
ーー> 

</ sty1e> 


</head> 
<body> 
* ス タイ ル シ ー ト の 情報 を 取得 する 


<diV 1d="STY1" sty1e="position:absolute: 1eft:100px: top:50px: wid 


th:200px: height:150px:background : Tan"> 
<b>8TY1 . . .</b> 
く /d1v> 


<d1v 1d="STY2" sty1e="position:absolute: 1eEt:100px: top:210px"> 


<fForm> 


<1mput type="button" value=" スタ イル シー ト の 情報 " onC1ick="StyVa1 


ue () "> 
< く / form> 
< く /d1 マ > 
</body> 
</htm1> 





も > 
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由 







子 ス タイ ル シ ー ト の 情報 を 取得 する 章 - 
Gocument.getElementById( ブ ナブ ジ ェクト た 名 ).style.left [プロ バテ ィ ] 
Gocument.getElementById( ブ ブ ジ ェ ク ム 名 ).style.top [プロ パティ] 
document.getElementById( ブ ブ ジ ェクト る ).style.width [プロ パテ ィ ] 
document.getElementById( ブ ナブ ジェ クト 名 ).Style.height 

[プロ バテ ィ ] 
document.al1( オ ブ ジェ クト 名 ).al1( ナ ブ ジ ェクト 名 ).style.1eft 

[ブロ パテ ィ ] 
document.al1( オ ナブ ジェ クト 名 ).a1( ナ ブ ジ ェクト 名).style.top の 52 

py 
document.al1( オ ブ ジ ェクト 名 ).al1( ナ ブ ジ ェクト 名 ).style.width rem 

[プロ パテ ィ ] 5_mac 
document.a11( オ ナブ ジ ェクト 名 ).a11( ブ ブ ジ ェクト 名 ).style.height 





[プロ バテ ィ ] 













 D:Y01jsYD1navieatory14stylesheet\02\indexhtml - Mi 司 | 回 | 了 
アイ ル F) 編集 E) 表示 ) お 気 に 入 D⑱⑯ ウー- ル ①D ヘル プ い 【 コ 


②③ ・⑨ 還る の 下 実 5mG20 細 ゼ 7 


* 子 スタ イル シー ト の 情報 を 取得 する 
























Microsoft Internet Explorer し 4| 
22 イル シー ト の 情報 、| 党 上 
1 
100px 
Epx 


ぶ * ト 且 当 テー で 和装 


4 


ネス ト き され た 子 ス タイ ル シ ー ト の 参照 は 、「getElementByldO」 メ ソ ッ ド で は 「document. 
getElementById( オ プ ジ ェ クト 名 ).style. プ ロ パ ティ 」 と し て 直接 オプ ジェ クト を 指定 する 
こと が で きま す が 、「all()」 メ ソ ッ ド の 場合 は 「document.all( 親 スタ イル シー ト 名 ).all( 子 
スタ イル シー ト 名 ).style. プ ロ パ ティ 」 と し て スタ イル シー ト の 階層 に 従っ て 設定 する 必 
要 が あり ます 。 

サン プル で は 、[「getElementByld()」 メ ソ ッ ド に 対応 し た Intemet Explorer 3.0 や Netscape 
6.0 以 降 の ブラ ウザ は 「getElementByld()」 メ ソ ッ ド の 用 法 を 使っ て 、「alO] メ ソ ッ ド に 対 
応 し た Intemet Explorer 4.X の プラ ウザ は [allO」 メ ソ ッ ド の 用 法 を 使っ て 、 子 スタ イル 
シー ト の 各種 の 値 を 取得 し て いま す 。 
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Opeya6 


Sa ね // 
圧 5-mac 
旗本 mac 


Intemet Explorer 4.X で は 、 子 スタ イル シー ト の 「width] プロ パテ ィ の 値 は 取得 で きま せ 
ん 。 ま た 、Netscape Navigator4.X で は 、 ネ スト され た スタ イル シー ト の 扱い 自体 に 問題 
が ある た め 、 サ ンプ ル で は Netscape Navigator 4.X の 場合 は 何 も 処 理 を し な いよ うに し 
て いま す 。 


| 


< く !DOCTYPE HTMIL, PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<html> 

<head> 

<meta http-equ1v="ConEent-Script-Type" conEent="text/]avaSCr1p 上 "> 
<meta htEp-equiv="Content-Sty1e-Type" content="Etext/css"> 

< 上 1 上 1e></ 上 1 上 1e> 


<SCr1ipt ype="Eext/avascr1pt"> 
< 中 ニー 
Function StyValue( ) { 
if (navigator .appVersion.indexOf ("MSTE 5") != -1 || 2 
appVersion . indexOf ( "MSTE 6") != -1)({ 
1f (document .getE1ementByTd) { 
a1ert ( " 親 スタ イル シー ト 左 か ら の 位置 : 
("8TY2") .gty1e.1ef 上 +"\n ロ "リキ 
" 親 ス タイ ル シ ー ト 上 か ら の 位置 : " 3 
("STY2") .gty1e .Eop+"\n" 二 
"横幅 : "+document .getE1ementByTd ("8my2") 0 
th+"\ ぎ mn" リキ 
" 高 さ : II 
ght ) : 


} 
elset 
if (document .a11 ) { 
a1ert( " 親 ス タイ ル シ ー ト 左 か ら の 位置 : "+qdocument .a11 ("8my1") | 
a11 ("STY2") . stEy1e .1eE 上 +"\ ロ " 
" 親 ス タイ ル シ ー ト 上 か ら の 位置 : RIRRRI 
a11 ("STY2" ) .gty1e .top+"\n"+ 
"横幅 : 
EE UE コ 
" 高 さ : 2 
height ) : 
は 
} 
1f (navigator . appName . charAt (0 ) =="N" ) { 
if (document .getE1ementByTd) { 
alert ( " 親 ス タイ ル シ ー ト 左 か ら の 位置 : " 人 
Td( "STY2") . sty1e .1eF 上 +"\n" 二 
" 親 ス タイ ル シ ー ト 上 か ら の 位置 : " 2 
エ d( "STY2") .sty1e .Eop+"\n"+ 


"横幅 : "+document . getE1ementByTd ("STY2" ) . gty1e. | 
width+"\n" キ 
* 高 さ : "+document . getE1emen も ByTd ("STY2" ) .sty1e. か, 
height ) : 
} 


} 
//--> 
</ SCr1p キ > 


<style type="text/css"> 

科 

body { background-col1or: #EFFFEF: } 
ーー テ 

</ sty1e> 


</head> 
<body> 
* 子 スタ イル シー ト の 情報 を 取得 する 
<div id="STY1" styl1e="position:absolute: 1efFt:100px: top:50px: wid 
th:200px: height:150px: z-1index=1 :vVis1bi11ty:Vis1b1e: Dackground : 」 
Green"> 

<diyv 1d="STY2" styl1e="position:absolute: 1eft:25px: top:50px: 
width:100px: height:75px: z-1ndex=2 :Vis1b111ty:Vis1b1e: ieciarownd | 
: Tan"> 
<b> 子 スタ イル シー ト </b> 

< く /d1V> 
</d1V> 
<div 1d="STY3" sty1e="position:absolute: 1eft:100px: top:210px"> 
<fForm> 

<input type="button" va1ue=" スタ イル シー ト の 情報 " onC1ick="StyVa1 
ue( ) "> 4 
</ Form> 
</d1 マ > 
</body> 
</htm1> 
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スタ イル シー ト の クリ ッ プ サイ ズ を 変更 する 
document.getElementByTd( オ プ ジ ェ クト る ).stye.cHp="rect(- ち 


右 , 万, を)" [プロ パテ ィ ] 
document.all1( ブ ナブ ジェ クム 名).style.cHip="rect( 上 , 右 , 下 を)" 
[プロ バテ ィ ] 


document.1ayers[ ブ ブ ジ ェクト た 名 ].cHip.top= ピク セル [プロ バテ ィ ] 
Gocunment.layers[ ブ ナブ ジェ クト 名 ].cHip.right= ピク セル [プロ パテ ィ ] 
document.1ayers[ ブ ブ ジ ェクト 名 ].cHip.bottom= ピク セル [プロ バ パティ] 
document.iayers[ ブ ナブ ジ ェクト 名 ].clip.left= ピク セル [プロ パティ] 





Before 





C:\Samples\js\01navigator\14stylesheet\D3\ndexh 
P 


* ス タイ ル シ ー ト の クリ ッ プ サイ ズ を 変更 する 















@* の 還る @ メ 


* ス タイ ル シ ー ト の クリ ッ プ サイ ズ を 変更 する 


272 


サン プル で は 、[ ク リッ プ サ イ ズ を 変更 する !!] ボ タン が 押さ れ た 時 に 、 関 数 [Size)」 が 
発生 し 、 関 数 内 の 処理 で スタ イル シー ト の クリ ッ プ サイ ズ を 変更 する こと に より 、 ス 
タイ ル シ ー ト の 表示 領域 を 変更 し て いま す 。 

関数 「Size()] 内 で は 、 下 文 を 使っ て プラ ウザ の 種類 や バー ジョ ン な ど を 判断 し ます 。 
Intemet Explorer 3.0 以降 や Netscape 6.0 な どの 「gsetElementByld)」 メ ソ ッ ド に 対応 し た 
プラ ウザ は [「document.getElementById( オ プ ジ ェ クト 名 ).style.clip] を 、mtemet Explorer 
4.0 な どの 「all0」 メ ソ ッ ド に 対応 し た プラ ウザ は 「documentLall( オ プ ジ ェ ク ト 名 ).style.clip」 
を 、Netscape Navigator4.X の レイ ヤー に 対応 し た プラ ウザ は 「documentlayers[ オ プ ジ ェ 
クト 名 ]」 を 、 使 用 する よう に し て いま す 。 

「getElementById)」 メ ソ ッ ド や [allO」 メ ソ ッ ド は 、「clip] プ ロ パ ティ を 使用 し て 、 そ の 値 
で 「"rect( ク リッ プ 上 の 位置 . ク リッ プ 右 の 位置 。 ク リッ プ 下 の 位置 . ク リッ プ 左 の 位置 )"」 
と し て 設定 し ます 。 また 、 ス タイ ル シ ー ト に 対応 し た Netscape Navigator 4.X で は 、 ク 


) 検 索 < 朗 お RCAD 





9 タイ ルシード 


リッ プ 上 の 位置 は 「clip.topp]」 プ ロ パ ティ 、 ク リッ プ 右 の 位置 は 「ciip.rightl プロパ ティ 、 
クリ ッ プ 下 の 位置 は 「ciip.bottom」 プ ロ パ テイ 、 ク リッ プ 左 の 位置 は 「clip.left] プ ロ パ ティ 
で 設定 し て いま す 。 

な お 、Netscape Navigator 4.X で は スタ イル シー ト の 表示 に 問題 が ある の で 、 ス タイ ル 
シー ト と 同じ 大 き さ の 画像 を 設定 し 、 ス タイ ル シ ー ト 全体 が 表示 され る よう に し て い 
ます 。 

また 、 こ の サン プル は 、Macintosh 版 の Tntemet Explorer 4.0 で は 機能 し ませ ん 。 


ie 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona]1 / /EN"> 
<htm1> 

<head> 

<meta http-equ1v="Content-Soript-Type" content="text/ avascript"> 
<meta http-equ1v="Content-Sty1e-Type" conEent="Eext/cs8"> 
<tit]1e></ 上 1 上 1e> 


<script type="text/]avaScr1p 上 "> 
<! ニー 
function Size() { 


if (navigator . appName . charAt (0 ) =="M" ) { 
1f (navigator .appVersion.indexOE ( "MSTE 5") != -1 || | 
navigator .appVersion . indexOf ("MSTE 6") != -1){ 


if (document . getE1ementByTd) { 
document .getE1ementByTQd ("STY1" ) . sty1e.c1ip="rect ( お 
10,150,100,50)" 
} 
} 
else{ 
if (document .a11 ) { 
人 
50)" 


if (navigator . appName . charAt ( 0 ) =="N" ) { 
if (document . getE]ementByTd) { 
document .getE1ementByTd ("STY1" ) . sty1e.c1ip="rect (10, 同 
150,100,50)" 
} 
if (document . 1ayerSs ) { 
document .1ayers[ "STY1"] .c1ip.top=10 : 
document .1ayers [ "STY1"] .C11p. ェ 1ght=150 : 
document .1ayerg["STY1"] .c1ip.bottom=100 : 
document .1ayerg[ "STY1"] .c1ip.1ef モ =50: 
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正 5-ma 


ルー ああ 
< く / SCr1D セ > 


<style type="Etext/css"> 

で ーー 

body { background-co]1or: #FFFfFff: } 
ーー テ > 


</ sty1e> 


</head> 
<body> 
* ス タイ ル シ ー ト の クリ ッ プ サイ ズ を 変更 する 
<form> 
<1nput type="button" value=" ク リッ プ サ イ ズ を 変更 する ! ! " 0 
@() "> 
</ Form> 
<diV 1d="STY1" style="posiEion:absolute: width:200px: 3 
px: 1eft: 100px: top:100px"> 
<1mg sro="1mage.]pg" a1t="1mage.giE" width="200" height="150"> 
< く /d1V> 
</body> 
</htm1> 


(⑫ 


スタ イル シー ト の 表示 ・ 非 表示 を 切り 替え る 


document.getE5lementByTd( オ ナブ ジェ クト 名 ).Style.ViSibility= 


"JsiD7e / dden" [プロ バ パティ] 

document.all( オ ナブ ジェ クト 名 ).style.visibilit="v7sD7e / 

igden" [プロ バ パティ] 

document.layers[ オ ブ ジ ェクト 名 ].Visibility= "vsz の 7e,snowy / 

igen, カ 9e"' [プロ パテ ィ ] 
Before 











ET RTTJUESESIUILEDEUUAAL EAT24 HLITT は 3 時 間 | 
プア イル (F) 編集) 表示 お 気 に 和 AD ツー ル ①D ヘル プ ⑪ 


〇 の 回 回 の の ws 放 pmoo 


ォ ス タイ ル シ ー ト の 表示 ・ 非 表示 を 切り 替え る 
After 


E 8 お PUESSIULPVTCIU2ALRIIT33ULTT は 48 是 当 m し 1 


ファ イル 編集 E) 表示 び ) お 気 に 和 AD⑱) ツー ル ①D ヘル プ ⑬ 
の 回 回 の の ws 嘉 5 


* ス タイ ル シ ー ト の 表示 * 非 表示 を 切り 替え る 









スタ イル シー ト の 可視 属性 を 設定 する 「visibiliry」 の 値 は 、Netscape Navigator 4.X の ス 
タイ ル シ ー ト に 対応 し た プラ ウザ で 使用 する 「layers」 の 場合 、 表 示 状態 は [show」、 非 表 
示 状 態 は 「hidden」 ま た は 「hide」 で す 。Internet Explorer や Netscape 6.0 で 使用 する 
「getElementById()」 メ ソ ッ ド や 「allO」 メ ソ ッ ド の 場合 、 表 示 状 態 は 「visible」、 非 表示 状 


郊 は 「hidden] と な り ま す 。 


サン プル で は 、 は じ め に スタ イル シー ト の [visibiliy」 の 設定 を 「hidden」 と し て 、 ス タイ 
ル シ ー ト を 非 表 示 状態 に し て いま す 。 そ し て 、[ 見 せる !] ボ タン が 押さ れ た 時 に 発生 す 
る 関数 [SImg()」 内 の 処理 に よっ て 、「document.getElementById("STY1").style.visibility」 
や 「document.all("STY1").style.visibility]l に は 「visible」 の 値 を 設定 し 、「document. 
layers['STY1"].visibility」 に は 「show」 の 値 を 設定 する こと に よっ て 、 表 示 状 態 に し ます 。 
[隠す !] ボ タン が 押さ れ た 時 は 、 関 数 「HImg()」 内 の 処理 に よっ て 、「document. 
getElementById("STY1").style.visibility」 や 「document.all("STY1").style.visibility」 に は 
[hidden」 の 値 を 、「documentlayers["STY1"].visibihity] に は 、「hide」 の 値 を 設定 する こと 





に よっ て 非 表示 状態 に し て いま す 。 
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<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm]> 

<head> 

<meta http-equ1 マ ="Conten-Script-Type" Conten="Eex 上 /]avascr1pt"> 
<meta http-equiv="Content-Sty1e-Type" conEent="text/ocss"> 
<t1t1e></ 上 1E1e> 


<SCr1pt type= "text/ avaScr1ipt"> 
上 エピ 
function STmg() { 
if (navigaor . appName . charAt ( 0 ) =="M" ) { 
1f (navigator .appVersion.1ndexOf ( "MSTE 5") != -1 || ae 
tor .appVersion . indexOf ( "MSTE 6") != -1){ 
if (document .getE1ementByTd) {document .getE1ementByTd( 2 
SmPY1") . sty1e.Yisibi1i モ マ ="yigib1e" } 
} 
elset 
if (document .a1 1 ) {document .a11 ("STY1" ) 2 
="vigib1e"} 
} 
} 
if (navigator . appName . charAt (0 ) =="N" ) { 
if (document .getE]ementByTd ) (document . getE1ementByTd ("STY1r 3 
) . sty1e .Y1gibi11ty="vyigsib1e"} 
if (document . 1ayers ) (document .1ayers[ "STY1"] 和 
"8Bhow" }) 
} 
} 
function HTmg(){ 
if (navigator . appName . CharAt ( 0 ) =="M" ) { 
1f (navigator.appVersion.1ndexOf ("MSTE 5") != -1 || 9 
tor .appVersion .indexOf ( "MSTE 6") != -1){ 
1f (document . getE1ementByTd) {document . getE1ementByTd( 骨 
"STY1") .gty1e.Y1sibi11 モ y="hidden"} 


} 
else{t 
if (document .a11 ) {document .a11 ("STY1" ) ia 
="hidden" }) 


} 
} 
if (navigator . appName . charAt ( 0 ) =="N" ) { 
if (document . getE]ementByTd ) {document . getE1ementByTd ("8TY1" | 
) .sty1e .visib1i11 モ ャ ッ ="hidden" ) 
if (document . 1ayers ) (document . 1ayers [ "STY1"] 0 
"hide"} 
} 























ピコ 
< く / SC エ 1p セ > 


<sty1e type="text/css"> 


3 っ 

body ( background-co]1or: #EFFFFF: } Frefox. 
に こと: MMoz 放 a 
</sty1e> _MZ.X 
</head> 

<Dbody> 


* ス タイ ル シ ー ト の 表示 ・ 非 表示 を 切り 替え る 
<div 1d="STY1" style="position:absolute: visibi1ity:hidden: 1eft: | 
100px: top:50px"> 
<1mg sro="1mage.]pg" a1t="image.]pg" width="100" height="100"> 
</d1v> 
<div 1d="STY2" sty1e=" position: absol1ute: top: 185px: 1eft: か 
visibi1ity: visible"> 
<fForm> 
<input type="button" value=" 見せ る!!" onc1ick="STmg( ) "> 
<1nput type="button" val1ue=" 隠 す !!" onc1ick="HTmg( ) "> 
</ form> 
</d1V> 
</body> 
</htm1> 
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スタ イル シー ト を 移動 する 
document.getElementById( オ ブ ジェ クト 名).sty1e.1eft=" ピ クセ ル " 


[プロ パテ ィ ] 
Gocument.all( ブ ブ ジ ェクト 名).style.1eft= "ピク セル " [プロ パテ ィ ] 
document.layers[ ブ ブ ジ ェクト 名 ].1eft= "ピク セル " [プロ バ パティ] 
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Welcom&YoHome Page 




















ァイル) 編集 (D 表示 ⑦ お 気 に 和 D⑳ ツウ - ル ①D AL2⑪ 
G*- の 回 回 の の we 宮 moo 


ォ * ス タイ ル シ ー ト を 移動 する 








Welcome To MY Home Page 





スタ イル シー ト 左 側 の ウィ ンド ウ 表 示 領 域 の 左端 か ら の 位置 は 、Intemet Explorer 5.0 
以降 や Netscape 6.0 な どの 「gsetElementByld()」 メ ソ ッ ド に 対応 し た プラ ウザ で は 
「document.getElementByld( オ プ ジ ェ クト 名 ).style.left] で 、Intemet Explorer 4.0 な どの 
「allO」 メ ソ ッ ド に 対応 し た プラ ウザ で は 「documentall( オ プ ジ ェ クト 名 ).style.left 」 で 、 
Netscape Navigator 4.X の レイ ヤー に 対応 し た プラ ウザ は 「document.layers[ オ プ ジ ェ ク 
ト 名 ].left 」 で 、 設 定 す る こと が で きま す 。 

サン プル で は 、 ま ず ウ ィ ン ド ウ 左 端 か ら 200 ピク セル の 位置 に スタ イル シー ト を 設定 
し て いま す 。 そ し て 、 ペ ー ジ が 読み 込ま れ た 時 に イベ ント ハン ドラ 「onload」 が 関数 
「StyMove() [を 発生 させ 、 関 数 内 の 処理 で 定期 的 に スタ イル シー ト の 左端 の 位置 の 値 
を 変化 させ る こと に よっ て 、 ス タイ ル シ ー ト を 左右 に 移動 させ て いま す 。 

Netscape Navigator 4.X の よう な レイ ヤー に 対応 し た プラ ウザ で は 、「document. 
layers[ オ プ ジ ェ クト 名 ].left」 の 値 は 数 値 で す 。 で すか ら 、「documentlayers["STY1"].eft 
-= 10] と し て スタ イル シー ト 「STY1」 を 左 に 10 ピク セル 、「documentlayers["STY3"]Jeft 
+= 10] と し て 「STY3」 を 右 に 10 ピ クセ ル ず らし ます 。 そ し て 次 の 「setTimeout 
("StyMove()".100)」 の 処理 で 、 再 び 関 数 [StyMove()」 を 発生 きる こと に よっ て 、 条 件 式 [ 








4 スタ シード 
























document.layers['STY1"].left>= 50 」 と 「document.layers["STY3"].left<=240 」 が 真 に な る 
まで 、 こ の 処理 を 続け る よう に し て いま す 。 
また 、「document.getElementById( オ プ ジ ェ クト 名 ).style.left」 や 「document.al( オ ブ ジ ェ 
クト 名 ).style.left 」 の 値 は 、「"n px"」 の 形式 の 文字 列 で す 。 サ ンプ ル で は 、 初 期 値 を 「200] 
と し た 変数 [STY1_Point| と 「STY3_Point] を 、「STY1_Point-=10」 や 「STY3_Poinrr=10] 請 語 避 
と し て 値 を 変化 きせ 、 そ れ に 文字 列 「px」 を 追加 し た も の を 、 そ れ ぞ れ の スタ イル シー 且 議 過 
ト 左 端 の 位置 の 値 に 設定 し て いま す 。 そ し て 、 ス タイ ル シ ー ト の 位置 を 設定 し た 後 は 、 玉 /4 
レイ ヤー と 同じ よう に 「setTimeout("StyMove)".100)」 に よっ て 再び 関数 を 発生 きせ 、 ス 措 記 4 
タイ ル シ ー ト 「STY1] が ウィ ンド ウ 左 端 か ら 50 ビク セル 、 ス タイ ル シ ー ト 「STy3」 が 重 鉛 
ウイ ンド ウ 左 端 か ら 240 ビク セル に な る まで 、 こ の 処理 を 続け る よう に し て いま す 。 Me 
な お 、<meta> を 入れ る と 、Netscape Navigator 4.X で は テキ スト の み の ス タイ ル シ ー ト 革 因 吉 
が 表示 され な い 場 合 が ある の で 、 サ ンプ ル で は <meta> を 省略 し て いま す 。 Opera6 


Sa ね 
EE 粒 KEKEK ド ュ に ト ユ ぃ QXQ ン ドド vn ドド ト ドニ ニニ b ち ム ヘ ペ ピ ペン グン MB8 レ 81 レ U ぬ 左 5-m。 
<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 圧 4-m 
<htm1l> 
<head> 
< 上 1t]e></ 上 it1e> 
<SCr1pt type="text/ avaSCr1pt"> 
1 
Yar STY1 Point=200: 
var STY3_Point=200: 
function StyMove ( ) { 
if (navigator . appName . CharAt ( 0 ) =="M" ) { 
if (navigator .appVersion .1ndexOf ( "MSTE 5") != -1 || vo 
or .appVersion .indexOf ( "MSTE 6") != -1){ 
if (document .getE1ementByTq) { 
if (document .getE1ementByTq ("STY1") .style.1eft != 
"50px" ) { document . getE1ementByTd ("STY1" ) .gtyle.1ef = (mri sole | 
=10)+"px" } 


"240px" ) { document . getE1ementByTGd ("STY3") .style.1eft = (STY3_ Point 


1f (document .getE1ementByTd ("STY3") .sty1e.1eft me | 
+=10)+ "px"} 


setTimeout ( "StyMove ( ) " , 100) : 
} 
} 
else{ 
if (document .a11 ) { 
if (document .a11 ("STY1") . sty1e.1eft != "50px")【 内 
document .a11 ("STY1" ) .style.1eEt = (STY1 Point-=10)+"pxx" } 
if (document .a11 ("STY3") .style.1eEt != "240px") { 骨 
document .a11 ("STY3" ) . sty1e.1ef 革 = (STY3 Poin モ +=10)+"pxx"] 


setT1imeout ( "StyMove ( ) " , 100) : 
} 
} 
} 
if (navigator . appName . CharA (0 ) =="N" ) 【 


Moz/a 
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if (document . getE1ementByTd) { 
ifF (document .getE1ementByTq ("STY1") .sty1e.1eft != "50p 
x" ) { document .getE1emenByTQ ("STY1" ) . st 上 y1e .1eE 上 = (STY1 Point-=10 ) | 
ャ WE 


if (document .getE1ementByTQq ("8TY3") .style.1eFt != "240 
px" ) { document . getE1ementByTq ("STY3" ) . sty1e .1eF 上 = (STY3 Point+= | 
10)+"pxx"] 

setTimeout ( "StyMove ( ) " , 100) : 


if (document . 1ayers) { 
if ( document.1ayers["STY1"].1eEt >= 50 ){ RI 
yers["8TY1"].1eft -= 10 )} 
if( document.1ayers[ "STY3"] .1eEt <= 240 )( ES 
yers["8TY3"].1eft += 10 } 
setTimeout ( "StyMove ( ) " , 100) : 


//--> 
< く / SCr1pt> 
中略 
</head> 
<body onLoad= "StyMove ( ) "> 
* ス タイ ル シ ー ト を 移動 する 
<div 1d="STY1" sty1e="position:absolute: 1eft:200px: SRSO 
81ze:24px"> 
We1come To 
< く /d1v> 
<div 1d="STY2" sty1e="position:absolute: 1eft:200px: AA 
Size:24px"> 
MY 
</d1v> 
<div 1d="STY3" sty1e="position:abso1ute: 1eft:200px: 0 
Size:24px"> 
Home Page 
</d1 マ > 
</body> 
</htm1> 


も > 
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且 字 雇 
クリ ッ ク し た 位置 へ スタ イル シー ト を 移動 する 
document.getElementById( オ ブ ジ ェクト 名 ).style.1eft= "ピク セル " 
[プロ バテ ィ ] 
document.8etElementById( ブ ブ ジ ェクト 名 ).style.top= "ビク セル " 
[プロ パテ ィ ] 
document.al1( ブ ブ ジ ェクト 名 ).style.1eft= "ピクセル" [プロ パテ ィ ] 
document.al1( ブ ブ ジ ェクト 名).style.top= "ピクセル" [プロ パティ] 
document.1ayers[ オ ブ ジ ェクト 名 ].1eft=" ビ ピク セル" [プロバ ティ ] 
document.layers[ オ ブ ジ ェクト 名 ].top= "ピク セル" [プロ バテ ィ ] 2 
Opeya6 
Sa な ね 
5-mac 
左 4-7ac 
計 三 
区 
タ 
イ 
ル 
2 
| 
ファ イル (E) 緒 業 人 E) 表示 ) お 気に入り ウー ル D へ プ 0⑪ 1 
@ 放 の 加 国谷 の ws 実 5m2o 利 
+ ク リッ ク し た 位置 へ スタ イル シー ト を 移動 する 3 
る 





サン プル で は 、 ま ず 「document.onmousedown」 を 使っ て 、 ウ ィ ン ド ウ 上 の マウ スポ ボタ ン 
が 押さ れ た 時 の イベ ント を 取得 し て 関数 [eve)」 を 発生 させ ます 。 関数 の 処理 で 、 イ ベ 
ント が 発生 し た 位置 を スタ イル シー ト の 位置 の 値 に 設定 する こと に よっ て 、 ク リッ ク 
し た 位置 へ スタ イル シー ト を 移動 きせ て いま す 。 「getElementByld0」 メ ソ ッ ド や [all0」 
メソ ッ ド 、 レ イヤ ー の どの 用 法 で も 、 ウ ィ ン ド ウゥ 表示 領域 左端 か りら の スタ イル シー ト 
左端 の 位置 は [leftl プ ロ パ ティ 、 ウ イン ドウ 表示 領域 上 か ら の スタ イル シー ト 上 の 位置 
は 「top] プ ロ パ ティ で 設定 する こと が で きま す 。 


スタ イル シー ト 497 







































本 
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移動 は 、 関 数 内 の 処理 で 、 ま ず 文 を 使っ て プラ ウザ や バー ジョ ン を 判断 し た 後 、 そ 
れ ぞ れ に 合わ せ て 「document.getElementById( オ プ ジ ェ クト 名 ).style」] や 「document.al( オ 
プ ジ ェ クト 名 ).style」、「documentlayers[ オ プ ジ ェ クト 名 ]] を 使っ て 「left] プ ロ パ ティ と 
[top]」 プ ロ パ ティ に 、 イ ベン ト が 発生 し た 位置 の 値 を 設定 し て いま す 。 

イベ ント が 発生 し た 位置 の 値 を 表す 用 法 は 、Intemet Explorer で は 上 か ら の 位置 が 
[window.eventoffsetX」、 左 か ら の 位置 が 「window.event.offsetY」、Netscape Navigator 
で は 上 か ら の 位置 が 「 引 数 jpageX」、 左 か ら の 位置 が 「 引 数 jpageY] と な り ま す 。Intemet 
Explorer と Netscape Navigator で は 培う 点 に 注意 し て く だ さい 。 


EYE 員 ーーーーーーーーーーーーー 一 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1/ /EN"> 
<htm1> 

<head> 

<meta http-equtv="Content-Script-Type" content="text /]avasCr1pt"> 
<meta http-equiv="Content-Sty1e-Type" content="Eext/CS8"> 

<t 上 1 上 1e></ 上 1]1e> 


<script type="Eext /]avaSCr1pt"> 
< く ! ニ ー 
function eve(e) { 
if (navigator . appName . CharAt ( 0 ) =="M" ) 
1E (navigator .appVersion . 1ndexOf ("MSTE 5") != -1 日 
navigator .appVersion.1ndexOf ( "MSTE 6*) != -1){ 
if (document .getE1emenEByTd) { 
document . getE1ementByTd("8TY" ) .5ty1e・ 1eft=window. | 
event .oEfFgeX: 
document .getE1ementByTd( "8TY" ) .sty1e .Eop=window・ ) 
event .oEFgeY: 
} 
} 
elset{ 
1f (document . a11 ) { 
document .a11 ("8TY" ) . sty1e . 1eft=w1ndow . event . OFfgetX : 
document .a11 ("STY" ) . sty1e .Eop=window.@Vent .OfFFgeY: 


} 
} 
if (navigator . appName . charAt (0 ) =="N" ) { 
if (document . getElementByTd) { 
document . getE1ementByTd ("STY") . sty1e.1eF モ =e.pageX 
document . getE1ementByTd ("8TY") . sty1e . モ Op=@・Dag@Y : 
} 
if (document . 1ayers) { 
document .1ayers[ "STY"] .1eFt=e . pageX : 
document .1ayers[ "STY"] .EOp=e.Da9@eY : 

















} 

documert . onmousedown = eve: 
//-ー テ > 

</ SCrip セ > 


<sty1e type="text/css"> 

に トー 

body ( background-co1or: #EFEFFFF: } 
ーー テ 


</ sty1e> 


</head> 

<body> 

ょ クリ ッ ク し た 位置 へ スタ イル シー ト を 移動 する 
<div 1d="STY" sty1e="position:absolute: width:100px: height:100px: 
1eft:50px: top:50px"> | 
<1mg sro="1mage.]pg' a1t="image.]pg" width="100" height="100"> リ 耶 7/ 
< く /d1> リア 前 
</body> 
</htm1> 
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年 ・ 月 ・ 日 ・ 時 ・ 分 ・ 秒 を 表示 する 

ブ ブ ジ ェクト 名 = new Date() 

ガブ ジ ェクト 名 .getYear() [メソ ッ ド ] 
ガブ ブ ジ ェクト 名 .getDate() [メソ ッ ド ] 
ガブ ジ ェクト 名 .getWionth() [メソ ッ ド ] 
ガブ ジェ クト 名 .get 理 ours() [メソ ッ ド ] 
ガブ ジェ クト 名 .getWIinutes() [メソ ッ ド ] 
オブ ジェ クト 名 .getSeconds() [メソ ッ ド ] 






TRUSTIUMUKNSUULTTUYUULURRI 直 = 


アル MD 電 委 ) 表示 Q⑦ お 気 に 入 0(⑳ ツー ル OD_AM209 
の ⑨・ の 回 還る の 
* 年 * 月 日 * 時 ・ 分 * 秒 を 表示 する 
2005 年 2 月 24 日 20 時 20 分 20 秒 














( Y 1 UL 


アイ ル G に 表示 の ーー cam 7 の 
* 年 月 * 日 "時 *・ 分 * 秒 を 表示 する 旬 
2006 年 2 月 24 日 20 時 20 分 30 秒 


OR の 還 敵 の の w 
* 年 月 ・ 日 "時 ・ 分 * 秒 を 表示 する 
2006 年 2 月 24 日 20 時 20 分 25 秒 ) 








サン プル で は 、「now=new Date()」 で マシ ン の シス テム 時 計 か ら 現 在 時 刻 の 要素 を 取り 
出し た オブ ジェ クト 「nowl| を 作成 し 、 そ こ か ら メ ソ ッ ド を 使っ て 各 時 間 の 要素 を 取 
得 し て いま す 。 

「getYear0」 メ ソ ッ ド は 西暦 の 下 2 桁 の 数 値 を 、「getMonth()」 メ ソ ッ ド は 1 月 を 0 と し た 
月 に 応じ た 0 か ら 11 まで の 数 値 を 、「getDate0」 メ ソ ッ ド は 日 に 応じ た 1 か ら 31 まで の 
数 値 を 、「getHours)」 メ ソ ッ ド は 時 間 に 対 応 し た 0 か ら 23 まで の 数 値 を 、「getMinutes()」 
メソ ッ ド は 分 に 対応 し た 0 か ら 39 まで の 数 値 を 、「getSeconds0]」 メ ソ ッ ド は 秒 に 対応 し 
た 0 か ら 39 まで の 数 値 を 、 そ れ ぞ れ 取 得 し ます 。 

サン プル で は 、2000 年 以降 で も 、「getYear()」 メ ソ ッ ド を 使っ て 正確 な 4 桁 の 年 号 を 表 
示 で きる よう に し て いま す 。 詳 し い 解 説 は 、 付 録 コ ラム の 「Javascript の 2000 年 間 題 ] 
(P.650) を 参照 し て くだ さい 。 


ETEENLLuu9u ト 5VVV〔 ペ 


<SCrip ype="Eext/]avascript"> 
に トー 
no = new Date() : 

if ( now.getYear ( ) >= 2000 ){ document .write (now.getYear ( ) , "年 
り 」 2 
else ( document .write (now.getYear( )+1900, "年 ") } 
document .write (now.getMonh ( ) +1, "月 ",now.getDate( ) , "日 ") : 
document . write (now.getHours ( ) , "時 ",now.getMinutes( ) , "分 ") : 
document .write(now.getSeconds ( ) , " 秒 ") : 
メー ニー 
< く / SCr1Dp キ > 


SO0 pee オ プシ ェ クト 


午前 午後 を 表示 する 


ガブ ジェ クト 名 = new Date( ) 
ガブ ジェ クト 名 .getHours( ) [メソ ッ ド ] 












計 C:\Samples\js\D2builtin\01date\02\index.html - Mic 
イル) 編集) 表示 び ) お 気に入り ツー ル ① へ ルプ ⑧ 


GR の 回 還 の の we axco 
* 午 前 午後 を 表示 する 
午前 








当 C:YSamples\js\02builtin\01date\02Ymdex.html - Mic.。 司 | 還 || 
アイ ル F) 編集) 表示 ) お 気に入り D(⑩ ツー ル ① へ ルプ ⑪⑬ 閑 


5 ・⑨@ - 関 較 人 ぬ め の 縮 均 5cA0 
* 午 前 午後 を 表示 する 
午後 











サン プル で は 、「getHours()」 メ ソ ッ ド で 現在 時 間 を 取得 し 、 そ の 数 値 が 12 よ り 小 さけ 
れ ば [午前 ]、 大 きけ れ ば 「 午 後 ] と 表示 し ます 。 
「 条 件 式 ? x:y」 は 、 条 件 式 が 真 の 場合 は 「x」 の 値 を 、 偽 の 場合 は 「y」 の 値 を 返し ます 。 


EE 所 


<SCr1pt ype="Eex/]avascr1pt 上 "> 


に コバ 
var now = new Date( ) : 
Var AMPM = now.getHours ( ) : 
document .write( AMPM<12 ? "午前 ":" 午 後 ") : 
//--> 
< く / SCr1D ヒ > 


月 の 値 を 表示 する 時 の 注意 
月 の 値 を 返す 「getMonth()」 メ ソ ッ ド は 、 実際 の 月 より 1 小さ い 数 値 を 返し ます 。 
正確 に 月 を 表示 させ た い 時 に は 、「getMonth()+1」 と 1 を 加え る こと を 忘れ な いよ 


うに し て くだ さい 。 
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曜日 を 表示 する 


オブジェ クト 名 = new Date() 
オブ ジェ クト 名.getDay() [メソ ッ ド ] 
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アイ ル (P 村 集 ) 表示 お 気 に 和 AD ウー ル D AM2⑱⑪ 
③・② の 図 較 人 ぬ の we 支 5 
夫 日 を 表示 する 
(日 














委 CYSamplesYjs\02boitmYWD1date\03\mdexhtml- 時 


アイ ル ) 編集 ) 表示 ⑰ お 気 に 入 D⑯ ウー ル GD ヘル ブ 0⑲ 


@*・ の 回 国人 の の ws 宮 5moo 





アイ ル 章 集 ) 表示 ⑰ お 気 に 和 AO ウー ル ① へ ルプ ⑳⑩ 


中 ・ の 回 回 人 の wa 友 2xc 













Cy5amplesvjsy0pboillnW01dateW03Windexhtml - Mi 回 


フイ ル (⑤ 編集) 表示 お 気に入り ④ ウー ル ①D へ ルプ 
OR・ の 回 還 人 の の m 支 Pmoo 

















アイ ル (P) 起業 ) 表示 ⑰ お気 に 入 0 ウー ル D へ ヘル 2⑩⑪ 
@m・ の 回 較 人 の の 5m29 
* 曜 日 を 表示 する 
(本 〉 

















イル) 皿 集 上 に 入り ⑯ 。 ウ - ル MD へ ルプ 0⑪ 
G- の 回 回 人 @ の w 衣 imoo 


*6 夫 日 を 表示 する 






委 cyY5smplesYjsY02buillmY01datew03Ymdexhtml- Mc 選 | 回 了 


イル) 還 灯 ) 表示 お 気 に 入 0 ウー ル D へ ルプ 0⑬ 
OR・ の 回 加 人 @ の ma 贅 oo 


*0 夫 日 を 表示 する 






( 金 ) 











( 土 ) 


曜日 を 取得 する 「getDay0」 メ ソ ッ ド は 、 日 曜日 の 場合 は 0、 月 曜日 の 場合 は 1、 と いう 
順番 で 、 曜 日 の 値 を 0 か ら 6 ま で の 数 値 で 取得 し ます 。 

サン プル で は 、 取 得 し た 数 値 を ぜ 文 で 参照 し 、 日 曜日 は 赤い 文字 で 、 土曜 日 は 青い 文 
字 で 、 そ の 他 の 曜日 は フォ ント の 色 指 定 な し で 書き 出し て いま す 。 


|Samplp 還 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1><head> 

<meta htEDp-equ1v="Content-Script-Type" content=" ex 上 / avaSCr1p 上 "> 
<meta ht て tp-equ1iv= "Content-Style-Type" content="Eext/css"> 

< ヒ 1 上 1e></ 上 1 上 1e> 




































<scrip type=" ex 上 /avaSCr1p ヒ "> /E6.0 
3 /E5.5 
var y0 = "日 ": /E5.0 


var y1 = "月 ": 
var y2 =" 全 ": 
var Y3 = " 来 ": 太 re7ox 
var y4 = " 木 ": 
var y5 = "人 金 ": AZX 
var y6 = " 土 ": 7 あ 7 
function gety(y) { 
if (y==0) { document .write( yO.fFontco1or("red") ) } 
if (y==1) { document.write( y1 ) } 1 
1fF (y==2) { document.write( y2 ) } Opera7 
if (y==3) { document.write( y3 ) } Opera6 
if (y==4) { document.write( y4 ) } 
1fF (y==5) { document.write( y5 ) } Sa ね / 
1fF (y==6) { document.write( y6.fFontco1or ("blue") ) } 圧 5-ma 
} 克 .ma 
ーー テ い テ 
</ SCr1pt> 
中 
</head> 
<body> 
* 曜日 を 表示 する 
< く Dp> 


( 
<scr1pt type="text/]avaSsCr1Dpt "> 
ぐ ! ニー 
day = nevw Date() : 
gety (day・getDay ( ) ) : 
ニニ =p 
</ 8Cr1D> 
) 
< く /p> 
</body></htm1> 






Macintosh 版 の Netscape Navigator で 

Date オブ ジェ クト を 使う 時 の 注意 

Macintosh 版 の Netscape Navigator 4.X 以 前 で は 、 グ リ ニ ッ ジ 標 準 時 (GTM) 

を 扱う 「toGMTString0」 メ ソ ッ ド や 「getTimezoneOffset0」 メ ソ ッ ド は 、 正 し い 
時 間 を 返し ませ ん 。 

また 、「getTime0」「parse0」「UTC0」 な どの 、1970 年 1 月 1 日 0 時 0 分 0 秒 , 

か ら の 経過 時 間 を 取り 扱う メソ ッ ド も 、 正 し い 日 付 を 返さ な い 場合 が あり ます 。 
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休日 を 表示 する 


オブ ジェ クト た 名 = new Date() 

オブ ジェ クム 名 .getMonth() ぱ ソ ッ ド ] 
オブジェ クム 名 .getDate() メソ ッ ド ] 
オブ ジェ クム 名 .getDay [メソッド ] 
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ァイル 太 集 ⑤ ① へ 『 コ 
〇 *・ の 回 回 @ の me 支 9o 


アイ ル ) 引 集 6) 表地 ⑦⑰ ① AM2⑪ 
GO の 回 の の mw 支 Bmo 
* 休 日 を 表示 する 
今日 は 「 こ ども の 日 」 で す 














nYDdateW04Yindex 
お 気に入り ⑯ ウー ル 








当 C YsamplesYjeY02buillm\01datewD4Yindexhtml - Mic 


アイ MC 電 要 ) 表示 Q⑰ お 所 に 入 ⑧ 9- ル OD へ JI プ ⑪ 
@ ま の 回 還る の we 支 pmo 
* 休 日 を 表示 する 
今日 は 「 天 皇 誕生 日 」 で す 



















サン プル で は 、HTML フ ァイル が 読み 込ま れ た 時 に 、 関 数 「gethd()」 内 の 「holiqay. 
getMonth()+1」 で 月 の 値 を 、「holiday.getDate()」 で 日 の 値 を 、「holiday.getDay()」 で 曜日 の 
値 を 、 そ れ ぞ れ 取 得 し ます 。 そ れ ら の 値 を 「function gethd(m.dy)[~)」 内 の 計 文 で 参照 
し 、 休 日 で あれ ば 休日 名 を 書き 出し ます 。 

「function gethd(m.d.y)」 の m に は 月 の 値 が 、d に は 日 の 値 が 、y に は 曜日 の 値 が 、 そ れ ぞ 
れ 渡 きれ ます 。 そ し て 、 二 文 内 の 条件 式 で 、 た と えば [(m==1&&d==1)」 は 「 月 の 値 が 1 
で か つ 日 の 値 が 1 で ある 」 こ と を 表し ます 。 こ の 条件 式 が 真 の 時 、 つ まり 1 月 1 日 の 時 
に は 、「var」 に よっ て 「hd0] と 宣言 され た 変数 の 値 、「 今 日 は 「 元 日 ] で す !! 明 け ま し て お 
めで と う ご ざ いま す 」 と いう 文字 列 が 書き 出さ れ ま す 。 

また 、 成 人 の 日 は 1 月 の 第 2 月 曜日 、 体 育 の 日 は 10 月 の 第 2 月 曜日 、 つ まり それ ぞ れ 1 
月 8 日 か ら 14 日 の 間 の 月 曜日 、10 月 8 日 か ら 14 日 の 間 の 月 曜日 で す 。 そ の た め 文 内 
の 条件 式 を 、 成 人 の 日 は 「(m==1&&8<=d&&d<=14&&y==1)」、 体 育 の 日 は 
「m==10&&8<=d&&d<=14&&y==1)」 と し て 、 休 日 を 特定 し て いま す 。 同様 に 、 海 の 日 
は 7 月 の 、 敬 老 の 日 は 9 月 の 第 3 月 曜日 で す 。 つ まり 、 そ れ ぞ れ の 月 の 15 日 か ら 21 日 
の 間 の 月 曜日 を 特定 する こと に よっ て 、 休 日 を 判断 し て いま す 。 


語 間 ee 


< く !DOCTYPE_ HTML PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona] / /EN"> 
<htm1><head> 

<meta http-equtv="Content-Script-Type" conEent="Eext / avascript"> 
<meta http-equ1v="ConEent-Sty1e-Type" content="text/css"> 





<1 上 1e></ 上 上]e> 
<script ype=" ext/]avaScr1p 上 "> 
で ーー 
var hd0 = "今日 は 「 元 日 ] で す ! ! 明 け ま し て お めで と う ご ざ いま す ": 
var hd1 = "今日 は 「 成 人 の 日 」 で す ": 
var hd2 = "今日 は 「 建 国 記念 日 ] で す ": 
var hd3 = "今日 は 「 春 分 の 日 ] で す ": 
var hd4 = "今日 は 「 み どり の 日 」 で す ": 
var hd5 = "今日 は 「 憲 法 記念 日 ] で す ": 
var hd6 = "今日 は 「 国 民 の 休日 ] で す ": 
var hd7 = "今日 は 「 こ ども の 日 」 で す ": 
var hd8 = "今日 は 「 海 の 日 」 で す ": 
var hd9 = "今日 は 「 敬 老 の 日 ] で す ": 
var hd10 = "今日 は 「 秋 分 の 日 ] で す ": 
var hd11 = "今日 は 「 体 育 の 日 」 で す ": 
var hd12 = "今日 は 「 文 化 の 日 」 で す ": 
var hd13 = "今日 は 「 勤 労 感謝 の 日 ] で す ": 
var hd14 = "今日 は 「 天 皇 誕生 日 ] で す ": 
Function gethd(m,d,y) ( 
if (m==1&gd==1) { document.write( hd0 ) } 
1F (m==1&&8<=dg&gd<=14g&gy==1 ) { document.write( hd1 ) } 
if (m==2g&d==11) { document.write( hd2 ) } 
if (m==3&&gd==20) { document.write( hd3 ) } 
if (m==4&&gd==29) { document.write( hd4 ) } 
if (m==5&gd==3) { document .write( hd5 ) } 
if (m==5&gd==4) { document.write( hd6 ) } 
if (m==5&&d==5) { document .write( hd7 ) } 
1F (m==7&&g15<=dggd<=21&&y==1) { document.write( hd8 ) } 
1fF (m==9gg15<=dggd<=21&&gy==1 ) { document.write( hd9 ) } 
if (m==9&g&d==23) { document .write( hd10 ) } 
1F (m==10&g8<=dggd<=14&&gy==1 ) { document .write( hd11 ) } 
ifF (m==11ggd==3 ) { document .write( hd12 ) } 
if (m==11g&d==23 ) { document.write( hd13 ) } 
if (m==12ggd==23) { document .write( hd14) } 
} 
7 ん / ニ ニテ 
< く / Script> 
中 略 
<body> 
* 休日 を 表示 する 
<D> 
<script type="text/]avascript"> 
く ! ニー 
ho1iday = new Date() : 
gethd (ho1iday .getMonth ( )+1 , ho11day.getDate( ) , ho11day.getDayY ( ) ) : 
7 が ニー= テ 
</ scr1p キ > 
く /p> 
</body></html> 











国際 標準 時 や ロー カル タイ ム を 表示 する 
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オブ ジェ クト 名 = new Date() 
ーmn オブ ジェ クト 名.toGMITString() [メソ ッ ド ] 
オプ ジ ェクト 名.toLocaleString() メソ ッ ド ] 
オブジェ クト る .getTimezoneOffset() [メソッド ] 
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講 C:\Samples\js\02builtin\01date\n5\imdex html 


イル 編集 ) 表示 ⑦ お 気 に AD(⑱ ツー ル ①D AM プ 
@⑨ 京 -⑨@ 回 還 の の ウ い 
+ 国 際 標 準 時 や ロー カル タイ ム を 表示 する 
グリ ニッ ジ 標 準 時 (GTM: Fr 21 Jan 2005 081053 UTO 


ロー カル タイ ム :2005 年 1 月 21 日 17.1053 
グリ ニッ ジ 標 準 時 (GTMW と ロー カル タイ ム の 差 :-540 分 
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「toGMTString()」 メ ソ ッ ド は 日 付 と 時 間 を GTM 形 式 の 文字 列 に 変換 し 、[toLocale 
Sring0」 メ ソ ッ ド は 日 付 と 時 間 を ロー カル タイ ム の 文字 列 に 変換 し ます 。 
「toGMTSring0」 メ ソ ッ ド は 実行 され た マシ ン の 環境 に よっ て 、 [toLocaleString()」 メ 
ソ ッ ド は 実行 され た 地域 と マシ ン の 環境 よっ て 結果 が 違い ます 。 
「getTimezoneOffset0」 メ ソ ッ ド は 、 グ リ ニ ッ ジ 標 準 時 と ロー カル タイ ム の 差 を 分 で 返し 
昌 。 


|Somnlr 王 呈 


<8Cr1pt ype="EexE/]avascr1ipt"> 
S 世 っ と 

gtm = new Date() : 

document .write ("グリ ニッ ツジ 標準 時 (GTM) : ", gtm.toGMm8tring() ) 

document . write ( "<br>" ) : 

document .write ("ロー カル タイ ム : " , gtm.toLoca1e8tring( ) ) : 

document .write ( "<br>" ) 

document .write ("グリ ニッ ツジ 標準 時 (GTM) と リー カル タイ ム の 差 : " , gtm.get 
TimezoneOEfset ( ) , "分 ") : 4 
//-- テ > 


ぷ 通 居 京 癌 天理 弄 ・ 主 m 川 


< く / SCr1D ヒ > 





に 1 にし る シル メー トメ まっ) 


オブ ジェ クト 名 =new Date( "月 量 , 年 歴 : 分 : 妙 ") 









オブ ジェ クト 名 .getTime() [メソ ッ ド ] 
オブ ジェ クト 名 .setTime() [メソ ッ ド ] 





委 CYSamplesYjsY02builtiny01date\06\jndex.html - Mic-- 司 | 回 | 


アイ ル ) 編集 表示 お 気 に 和 AD ツー ル D へ M プ ⑬ 生 
の 回 回 人 の の 5moo 
+ 日 時 を 後 か ら 変更 する 


Tus May 2 23.45.00 UTC+0900 1967 
の 31 日 後 は 
Fri Jun 2 23.4500 UTC+0900 1967 





「setTime0]」 メ ソ ッ ド は 、 ミ リ 秒 単位 で 日 付 と 時 間 の 設定 を 行い ます 。 

サン プル で は 、[「ChangeDay =new Date("may 2.1967 23:45:00")] で 1967 年 $ 月 2 日 23 時 
45 分 の 要素 を 持っ た 「ChangeDay」 と いう オプ ジェ クト を 作り ます 。 そ の 後 、「setTime()」 
メソ ッ ド を 使用 し て 、「ChangeDay」 オ プ ジ ェ クト を 31 日 後 の 日 時 を 持つ オプ ジェ クト 
に セッ ト し 直し て いま す 。 


IE 間 了 ーーーーーーーー 


<sCript type="text/]aVvaScript"> 

ぐ ! -- 

ChangeDay = new Date("may 2, 1967 23:45:00"): 

Day = 24*60*60*1000: 

document .write (ChangeDay) : 

document .write( "<br> の 31 日後 は <br>" ) : 
ChangeDay.setTime(ChangeDay .getmime() + Day * 31): 
documert .write (ChangeDay) : 

0 がら ロコ 

</ scr1p キ > 
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306 pe オラ ジェ クト 








年 ・ 月 ・ 日 ・ 時 ・ 分 ・ 秒 を 設定 する 
ブ ブ ジ ェクト た 名 = new Date( "月 量 , 年 歴 : 分 : 秒 ") 

ブ ブ ジ ェクト 名 .setYear() [メソ ッ ド ] 
ガブ ブ ジ ェクト 名 .setWIonth() [メソ ッ ド ] 
ブ ブ ジ ェクト 名 .setDate() [メソ ッ ド ] 
ガブ ジェ クト 名 .setHours() [メソ ッ ド ] 
オブジェ クト 名 .setWrinutes() [メソ ッ ド ] 
オブ ジェ クト 名 .setSecondls() [メソ ッ ド ] 











公 C-YSamples\js\02builtim\01date\07\indcx btml - Mic. 司 | 隔 | 区 


アイ ル (⑥) 編集 ED 表示 ⑰ お 気 に 和 AD ウ - ル ①D AM プ 『 
〇 の 回 回 人 る の wa 克 smoo 
* 年 * 月 ・ 日 ・ 時 ・ 分 * 秒 を 設定 する 


設定 前 : Fri May 2 230000 UTO+0900 1997 


年 の 設定 変更 : Sat May 2 230000 UTC+0900 1970 


設定 前 :Fri May 2 23.0000 UTO+0900 1997 
月 の 設定 変更 :Tus Sep 2 23.0000 UTC+0900 1997 





「setYear0]」 メ ソ ッ ド は 年 の 下 2 桁 を 設定 し 、「setMonth()」 メ ソ ッ ド は 0 を 1 月 と し た 数 値 
で 月 を 設定 し 、「setDate0」 メ ソ ッ ド は 日 を 設定 し 、「setHours()」 メ ソ ッ ド は 時 間 を 設定 
し 、「setMinutes0] メ ソ ッ ド は 分 を 設定 し 、「setSeconds)」 メ ソ ッ ド は 秒 を 設定 し ます 。 

サン プル で は 、 各 メソ ッ ド を 使っ て 1 度 設定 され た 年 ・ 月 ・ 日 ・ 時 ・ 分 ・ 秒 の 設定 を 変更 し 
て いま す 。 設定 変更 が 、 SS も 影響 を 与え を て いる (た と えば 、 
秒 に 60 以上 の 数 値 を 設定 し た 、 分 な ども それ に 合わ せ て 変更 され て いる ) 点 に 注 
目 し て くだ さい 。 


|Somnlr 王 還 還 


< く SCr1D yDpe="Eex ヒ /]avasCr1pt"> 

EE 

NewDay1 = new Date( "may 2, 1997 23:00:00") : 
document .write( "設定 前 :",NewDay1) : 

document .Write ("<br>" ) : 

NewDay1 . setYear(70) : 

document . write( "年 の 設定 変更 : ", NewDay1 ) : 

パー ビン 

</ SCr1pt> 

</p> 

< く D> 

く SCr1D ype=" 上 ex 上 / avaSC て ipt"> 

5 ュー 

NewDay2 = new Date("may 2, 1997 23:00:00"): 
document .write( "設定 前 : ",NewDay2.) : 





documen . write ( "<br>" ) : 

NewDay2 . setMonth(8) : 
document . write ( "月 の 設定 変更 :" ,NewDay2 ) : 
// ーー テ > 

</ scr1pt> 

< く /p> 

<Pp> 

<SCr1p ype=" て ex / avaScr1ip"> 

く ! ニー 

NewDay3 = new Date("may 2, 1997 23:00:00"): 
document . write ( "設定 前 : " , NewDay3 ) : 
document .write ("<br>" ) : 

NewDay3 . setDate(34) : 

document . write ( "日 の 設定 変更 :" ,NewDay3 ) : 

ん メーー ゥ 

</ SCr1pt> 

</p> 

< く D> 

<script type="text/]avaSCr1pt"> 

く ! ニー 

NewDay4 = new Date("may 2, 1997 23:00:00"): 
document .write( "設定 前 : ",NewDay4) : 
document .write("<br>" ) : 

NewDay4 . getHours (14 ) : 

document .write ("時間 の 設定 変更 : " ,NewDay4 ) : 
/ / --> 

</ scCr1pt> 

< く /p> 

<D> 

<SCr1pt type="tex 上 /aVaSo て ip 上 "> 

く ! ニー 

NewDay5 = new Date("may 2, 1997 23:00:00"): 
document . write( "設定 前 : ",NewDay5) : 
document .write( "<br>" ) : 

NewDay5 . setMinutes(186) : 

document .write( "分 の 設定 変更 : ",NewDay5) : 
//ーー テ 

</ SCr1pt> 

< く /p> 

<D> 

<Scr1pt type="text/aVaSC て ipt "> 

く ! ニー 

NewDay6 = new Date("may 2, 1997 23:00:00"): 
document .write( "設定 前 : " ,NewDay6 ) : 
document .write( "<br>" ) : 

NewDay6 . setSeconds ( 246) : 

document . write ( " 秒 の 設定 変更 : ", NewDay6 ) : 
2 

</ Scr1p キ > 
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西暦 を 4 桁 で 表示 する 


ガブ ジェ クト 名 = new Date() 
ガブ ジェ クト 名 .getFullYear() [メソ ッ ド ] 


当 C-*Samples\js\02builtin\01date\08\index.btml - Mic.. 隔 | 上 


アイ ル (上 編集 E) 表示 お気 に 和 D(⑱) ツー ル ① 人 ルプ ⑪ 
Os・ の 回 回 の の me smoo 
* 西 暦 を 4 桁 で 表示 する 

2005 年 





「getFullYear()] メ ソ ッ ド は 、 年 の 値 を 4 桁 で 返し ます 。 

以前 か ら あ っ た 「getYear()]」 メ ソ ッ ド は 基本 的 に 西暦 の 下 2 桁 の 値 し か 返し ませ ん が 、 
「setFullYear()」 メ ソ ッ ド の 場合 は 、 た と えば 「1999] と いっ た よう に 、4 桁 すべ て の 値 を 
返し ます 。 

「getYear0] メ ソ ッ ド で も 西暦 2000 年 以降 の 年 の 値 を 取り 扱え を ます が 、ECMAScript と 
仕様 を 合わ せる た め に 追加 され まし た 。 

JavaScript1.3 で 追加 され た メソ ッ ド で す が 、Netscape Navigator 4.0 や Intermet Explorer 
4.X で も 使用 する こと が で きま す 。 


ee 


く SC エ 1D 上 ypDe="Eex 七 / JaVaSCr1p キ "> 

に し ーー 

now = new Date( ) : 

document . write (now.getFu11Year( ) , "年" ) : 
//-ー> 

< く / SCr1D セ > 





4 桁 の 西暦 を 設定 する 
オフ ジェ クト 名 =new Date() 
オブ ジェ クト 名 setFullYear() メソ ッ ド ] 


当 C-\Sample ss\js\02builtin\01date\09\index.html - Mic 


プア ァイル (ED 編集 GE) 表示 (V) お 気 に 入 D⑱ ウー ル ①D へ ヘルプ ⑬ 


@・ の 回国 人 の の ws 安 5moo 


*4 桁 の 西暦 を 設定 する 


西 層 設 定 前 :2005 年 
西暦 設定 後 :1999 年 


「setFullYear)」 メ ソ ッ ド は 、4 桁 の 年 の 値 を 設定 し ます 。 

以前 か ら あ っ た 「setYear()」 メ ソ ッ ド は 基本 的 に 年 の 下 2 桁 を の み を 設定 し ます が 、 
「setFullYear0」 メ ソ ッ ド は 、 サ ンプ ル の よう に 年 の 値 す べ て を 設定 し ます 。 
「setYear0] メ ソ ッ ド で も 西暦 2000 年 以降 の 年 の 値 を 取り 扱え ます が 、ECMAScript と 
仕様 を 合わ せる た め に 追加 され まし た 。 

JavaScript1.3 で 追加 され た メソ ッ ド で す が 、Netscape Navigator 4.0 や Internet Explorer 
4.X で も 使用 する こと が で きま す 。 


| Somplc 王 還 還 


<SCr1pt type="tex 上 /]avaScr1pt "> 

く !ーー 

now = new Date() : 

document .write( "西暦 設定 前 : ",now .getFu11Year ( ) , " 年" ) : 
document .write ( "<Dr>" ) : 

now.8etFu11Year(1999) : 

document .write ( "西暦 設定 後 : ",now .getFu11Year ( ) , " 年") : 
// --> 

</ Script> 
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ミリ セコ ンド を 表示 する 


ガブ ブ ジ ェクト 名 = new Date() 
ガブ ブ ジ ェクト 名 .getWillisecondls() [メソ ッ ド ] 
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7 

こ EE ほお FTTISSS3IUMTTIITEUIPRCS3IULTD は 3 | 
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1000 分 の 435 秒 
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「getMilliseconds()」 メ ソ ッ ド は 、1000 分 の 1 秒 の 値 を 0 か ら 999 の 数 値 で 取得 し ます 。 
ECMAScript と 仕様 を 合わ せる た め に JavaScriptl.3 で 追加 され た メソ ッ ド で す が 、 
Netscape Navigator 4.0 や Internet Explorer 4.X で も 使用 する こと が で きま す 。 


EE 


<8C エ 1p type= "ex 上 / avaScr1ipt"> 

リー 

now = new Date( ) : 

document .write("1000 分 の " ,now.getMi11iseconds ( ) , " 秒 " ) : 
ルー こ の 

</ Cript> 


@ い et 還 半 乱 吾 昼 ・ 証 加 川 
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に 3 リル レス は オナ 六 -) 
ブ ブ ジ ェクト 名 =new Date( ) /E4.0 
オブ ジェ クト 名 .setWIilliseconds() [メソ ッ ド ] 
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記 C-\Samples\js\02built in\01date\11\jndex.html 一 Mic 同 回 共 
ファ イル (E) 編集 GE) 表示 \) お 気 に 入 D⑱ ウー ル D へ ルプ 【 】 


@ ま -・⑨ 国人 の の 野宮 5 結 29 
* ミ リセ コン ド を 設定 する 
ミリ セコ ンド 設定 前 : 1000 分 の 840 秒 


Ope/aZ 


加 回 思 
< 有紀 | に 


Opeya6 
ミリ セコ ンド 設定 前 :1000 分 の 500 秒 ピ 





「setMilliseeonds0] メ ソ ッ ド は 、1000 分 の 1 秒 の 値 を 0 か ら 999 の 数 値 で 設定 し ます 。 
ECMAScript と 仕様 を 合わ せる た め に JavaScript1.3 で 追加 さき れ た メソ ッ ド で す が 、 
Netscape Navigator 4.0 や Internet Explorer 4.X で も 使用 する こと が で きま す 。 


EETYT 王 時 __- ーー 


<SCript type="texE/aVaSCr1p 上 "> 

に 

now = new Date() : 

document .write ("ミリ セコ ンド 設定 前 : ", "1000 分 の " , now .getMi111iseconds ( ) , 

" 秒 ") : 4 
document .write ("<br>" ) 

novw.setMi11iseconds(500) : 

document . write ("ミリ セコ ンド 設定 前 : ", "1000 分 の " , now.getM1i11iseconds ( ) , 
" り : 由 
(Ao 

</ Script> 


@ 還 涯 齋 可 和 吾 天 ・ 証 上 
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ぷ *H 還 崇 庫 趣 靖 可 天 ・ 革 上 l 


UTC を 表示 する 


オプ ジェ クト 名 = new Date() 

オブ ジェ クト 名 .getUTCFullYear() [メソッド] 
オブジェ クト 名 .getUTCWIonth() メソ ッ ド ] 
オブ ジェ クト 名 .getUTCDate() [メソッド] 
オブ ジェ クト 名 .getUTCHours() ぱ メソッド] 
オブ ジェ クト 名 .getUTGTMinutes() メソ ッ ド ] 
オプ ジェ クト 名 .getUTCSeconds() [メソッド ] 
オプ ジェ クト 名 .getUTCWMIiliseconds() ぱ メソッド] 
オブ ジェ クト 名 .getUTCDay() ば メソッド] 





le sf 
アイ ル (F) 編集 


@・ つ 回 回 の の me 安 Pwcx 


*UTC を 表示 する 


2005 年 2 月 24 日 11 時 50 分 2 秒 802 ミ リ 秘 ( 木 曜日 ) 





JavaScript1.3 で は 、UTC(Coordinated Universal Time : 協 定 世界 時 ) を 取得 する 多く の メ 
ソ ッ ド が 追加 され て いま す 。 

サン プル で は 、「now =new Date)] で マシ ン の シス テム 時 計 か ら 現 在 時 刻 の 要素 を 取り 
出し た オプ ジェ クト 「now」 を 作成 し 、 そ こ か ら 各 UTC の 時 間 の 要素 を 、 メ ソ ッ ド を 使っ 
て 取得 し て いま す 。 

「getUTCFulIYear()」 メ ソ ッ ド は 4 桁 の 西暦 の 数 値 を 、「getUTCMonth()」 メ ソ ッ ド は 1 月 
を 0 と し た 月 に 応じ た 0 か ら 11 まで の 数 値 を 、「getUTCDate0」 メ ソ ッ ド は 日 に 応じ た 
1 か ら 31 まで の 数 値 を 、「getUTCHours()」 メ ソ ッ ド は 時 間 に 対 応 し た 0 か ら 23 まで の 
数 値 を 、「getUTCMinutes()」 メ ソ ッ ド は 分 に 対応 し た 0 か ら 59 ま で の 数 値 を 、 
「getUTCSeconds()」 メ ソ ッ ド は 秒 に 対応 し た 0 か ら 59 ま で の 数 値 を 、「getUTC 
Milliseconds()] メ ソ ッ ド は 1000 分 の 1 秒 に 対応 し た 0 か ら 999 まで の 数 値 を 、「getDay()」 
メソ ッ ド は 日 曜日 を 0、 月 曜日 を 1、 と いう 順番 で 0 か ら 6 ま で の 数 値 を 、UTC で 取得 
攻 家 応 

これ ら の メソ ッ ド は 、ECMAScript と 仕様 を 合わ せる た め に JavaScript1.3 で 追加 され た 
メソ ッ ド で す が 、Netscape Navigator4.0 や Internet Explorer4.X で も 使用 する こと が で き 
まあ 





514 pem オプ ジ ェクト 


ee 


<!DOCTYPE HTML. PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta htp-equ1v="ConEten ヒ -Scr1pt-Type" conten キ =" て ex/ avasc エ 1pt"> 
<meta htp-equ1v="Content-Style-Type" content="Eext/css"> 

< ヒュ 上 1e></ 上 1 上 1e> 

<SCript type="Eext/]avascr1p"> 


さい ニー 

var y0 = "日 ": 
Wa が 1 = た 月 55 
var V2 = "人 鈴 *5 
var y3 = " 水 ": 
var y4 = " 木 ": 


var y5 = "人 金 ": 
var y6 = " 土 ": 
function getUTC (y) { 
if (y==0) { document.write( y0.Fontco1or( "red") ) } 


if (y==1) ( document.write( y1 ) } 
if (y==2) { document.write( y2 ) } 
if (y==3) ({ document.write( yY3 ) } 
if (y==4) ( document.write( y4 ) } 
ifF (y==5) { document.write( y5 ) } 
if (y==6) { document .write( y6.fFontco1or( "bl1ue") ) } 

} 

ん / ニ ーッ > 

く / Scr1Dpt> 

一 中 略 て 

</head> 

<body> 

*UTC を 表示 する 


< く D> 

<SCr1pt type="text/]aVvaSCr1p ヒ 上 "> 

く !-ー 

now = new Date() : 
document .write (now.getUTCFu11Year( ) , " 年") : 
document .write (now .getUTCMonth( ) +1 , "月 ",now.getUTCDate( ) , "日 ") : 
document .write (now .getUTCHours( ) , "時 " ,now.getUTCMinutes ( ) , "分 ") : 


document .write(now.getUTC8econds ( ) , " 秒 " 


⑬ "ミリ 秒 9) 
document .write("("): 
getUTC (now .getUTCDay( ) ) : 
document .write(" 曜 日) ") : 

//-- テ > 

< く / SCr1p セ > 

く /p> 

</body> 

</htm1> 
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ガブ ジェ クト 名 = new Date() 

ガブ ジェ クト 名 .toUTCString() [メソ ッ ド ] 
ブ ブ ジ ェクト 名 .setUTCFullYear() [メソ ッ ド ] 
ガブ ジェ クト 名 .setUTCWIonth( ) [メソ ッ ド ] 


ガブ ジェ クト 名 .setUTCDate() [メソ ッ ド ] 
ガブ ジェ クト 名 .setUTCHours() [メソ ッ ド ] 
ブ ブ ジ ェクト 名 .setUTCTIinutes() メソッド ] 
ブ ブ ジ ェクト 名 .setUTCSecondls() [メソ ッ ド ] 
ガブ ジェ クト 名 .setUTCMIiHlisecondis() [メソ ッ ド ] 





W お 気 に 和 0@ ウー ル D AA プ ⑩ 


@ ま の 回 国人 @ の ws 宮 5mo20 


設定 前 : Thu 24 Feb 2005 132222 UTO 
UTC の 年 の 設定 変更 :Wed, 24 Feb 1999 132222 UTC 


設定 前 :Thu 24 Feb 2005 132222 UTC 
UTC の 月 の 設定 変更 :Tus, 24 Jan 2006 132222 UTO 


設定 前 : Thu 24 Fab 2005 132222 UTO 
UTC の 日 の 設定 変更 :Thu, 10 Feb 2005 132222 UTC 


設定 前 : Thu, 24 Feb 2005 132222 UTC 
UTC の 時 間 の 設定 変更 : Thu. 24 Feb 2005 142222 UTC 


設定 前 : Thu, 24 Feb 2005 
UTC の 分 の 設定 変更 : Thu 160622 UTG 


設定 前 : Thu. 24 Feb 2005 132: C 
UTC の 秒 の 設定 変更 : Thu 132500 UTC 


設定 前 : Thu, 24 Feb 2005 132222 UTC 
UTC の ミリ セコ ンド の 設定 変更 : Thu. 24 Feb 2005 132224 UTC 





JavaScript1.3 で は 、UTC(Coordinated Universal Time 協定 世界 時 ) を 設定 する 多く の メ 
ソ ッ ド が 追加 され て いま す 。 

サン プル で は 、 ペ ー ジ が 読み 込ま れ た 時 の 時 間 の 値 を 、 各 メソ ッ ド を 使っ て 変更 し て 
いま す 。 

「setUTCFullYear()」 メ ソ ッ ド は 4 桁 の UTC の 年 の 値 を 設定 し 、「setUTCMonth()」 メ ソ ッ 
ド は 0 を 1 月 と し た 数 値 で UTC の 月 の 値 を 設定 し 、「setUTCDate()」 メ ソ ッ ド は UTC の 
日 の 値 を 設定 し 、「setUTCHours()」 メ ソ ッ ド は UTC の 時 間 の 値 を 設定 し 、 
「setUTCMinutes()」 メ ソ ッ ド は UTC の 分 の 値 を 設定 し 、「setUTCSeconds()」 メ ソ ッ ド は 

UTC の 秒 の 値 を 設定 し ます 。 な お 、「toUTCString()」 メ ソ ッ ド は 、UTC の 日 付 と 時 間 を 
文字 列 へ 変換 し ます 。 

これ ら の メソ ッ ド は 、ECMAScript と 仕様 を 合わ せる た め に JavaScript1.3 で 追加 され た 
メソ ッ ド で す が 、Netscape Navigator4.0 や Intemet Explorer4.X で も 使用 する こと が で き 
まず:。 


lo pe オッ ジェ クト 


章 Ne 


く D> 

< く 8C エ ip 上 type=" ex 上 /]avaSCr1pt"> 

ざ 由 ンー 

NewDay1 = new Date() : 

document .write( "設定 前 : ",NewDay1 .toUTC8tring( ) ) : 
document .write( "<br>" ) : 

NewDay1 . setUTCFu11Year(1999) : 

document .write ( "UTC の 年 の 設定 変更 : " ,NewDay1 .toUTC8tring( ) ) : 
ーッ 

< く / SCr1pt> 

</Dp> 

<D> 

<SCr1p type="text/]avaScCr1p 上 "> 

<! ニー 

NewDay2 = new Date() : 

document .write ("設定 前 : ",NewDay2 .toUTC8tring() ) : 

document .write( "<Dbr>" ) : 

NewDay2 . setUTCMonth ( 12 ) : 

document .write ( "UTC の 月 の 設定 変更 : ",NewDay2 .toUTC8tring() ) : 
が ニー ニッ 

</ Script> 

</p> 

<D> 

<8Cr1p ype="text/]avaScr1p 上 "> 

べく ル ーー 

NewDay3 = new Date() : 

document .write ("設定 前 :" ,NewDay3 .toUTCString() ) : 

document .write( "<br>" ) : 

NewDay3 . setUTCDate (10 ) : 

document .write ( "UTC の 日 の 設定 変更 : " , NewDay3 .toUTC8tring() ) : 
人 ん = らら 

</ scr1pt> 

< く /p> 

く D> 

<8Cr1p ype="tex 上 /]avaSCript"> 

ニー 

NewDay4 = nevw Date( ) : 

document .write( "設定 前 : " ,NewDay4 .toUTCString( ) ) 

document .write( "<br>" ) : 

NewDay4 . setUTCHourg (14 ) : 

document . write ( "UTC の 時 間 の 設定 変更 : ",NewDay4 .toUTCString( ) ) : 
// ニ ニテ 
</ SCr1p セ > 
< く /p> 
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<D> 
<SCript 1anguade= "JavaScr1pt"> 

で ーー 

NewDay5 = new Date() : 

document .write( "設定 前 : " , NewDay5 . toUTCSt ェ ing( ) ) : 

document .write( "<br>" ) : 

NewDay5 . setUTCM1nutes (186) : 

document .write ("UTC の 分 の 設定 変更 : " ,NewDay5 .toUTCString( ) ) : 
//--> 

< く / SCr1D ヒ > 

く /p> 

<D> 

<SCript 1anguage= "JavaSorip 上 "> 

マリ ニー 

NewDay6 = new Date() : 

document .write( "設定 前 : ", NewDay6 .toUTCString( ) ) : 

document .write ("<br>" ) : 

NewDay6 . seEUTCSeconds (180) : 

document .write( "UTC の 秒 の 設定 変更 : " ,NewDay6 .toUTCSt ェ ing( ) ) : 
ん / ニ = テ 

</ Scr1ipt> 

く /p> 

<D> 

<Scrip 1anguage= "JavaScr1p 上 "> 

3 ニテ = 

NewDay7 = new Date() : 

document .write( "設定 前 :",NewDay7 .toUTC8t ェ ing( ) ) : 

document .write ( "<br>" ) : 

NewDay7 . setUTCM1111iseconds(2000): 

document .write ( "UTC の ミリ セコ ンド の 設定 変更 : " ,NewDay7 .toUTC8tring( ) ) , 
7 が つい み 

</ script> 

く /p> 


民 
に 
(= こ 】 


に ck そ レル 4 - ケ ルス 0 
ガブ ジェ クト 名 = new Date() 
ガブ ジ ェクト 名 = new Date( 年 , 有 , 硬 ) 
ガブ ジェ クト 名 .getTime() Moz/a 

WZ.X 
計 C:\Samples\js\02builtin\01 date\14\index.html - Mic 
アイ ル ) 編集 (E) 表示 \) お 気に入り ⑱ ツー ル ①D へ ルプ ⑪ ーー 
G 〇 の 回 回 の の we 支 5moo 0 
・BY を カウ ント ダウン す る ーー 


西 層 2010 年 まで あと 1772 日 


Sa ね // 


リン Es 
左 4-mac 





サン プル で は まず 、「ioday = new Date()」 で 現在 の 時 間 の 要素 を 持っ た 「today] と いう オ 
プ ジ ェ クト と 、「XDay = new Date(2010.0.1)」 で 西暦 2010 年 1 月 1 日 の 要素 を 持っ た 
「XDay」 と いう オプ ジェ クト を 作っ て いま す 。 そ し て 、「getTime)」 メ ソ ッ ド を 使っ て 、 
それ ぞ れ の オプ ジェ クト の 1970 年 1 月 1 日 0 時 0 分 0 秒 か ら の ミリ 秒 単位 の 経過 時 間 を 
取得 し 、 そ の 差 の 値 を 「/(24*60*60*1000)」 と する こと に よっ て 、 日 数 に 戻し て いま す 。 
[new Date(2010,0.1)」 内 の 日 付 を 変更 する こと に よっ て 、 希 望 の 日 付 で で の カウ ント ダ 
ウン を する こと が で きま す 。 


ED 所 


<8Cr1pt ype= "ex/]avaSCr1Dpt "> 

3 

today = new Date() : 

XDay = nevw Date(2010,0,1) : 

NC = (XDay.getTime ( ) -today.getTime ( ) ) / (24*60*60*1000) : 
document .write( "西暦 2010 年 まで あと "+ Math.cei1 (NC) +" 日 ") : 
グー ニー テ 

< く / SCr1D ヒ > 


の 還 半 齋 問 乱 吾 居 ・ 主 上 


も >) Math.ceil() : 「Math オ ブ ジ ェクト 」 の 「 も っ と も 近く て 大 きい 整数 を 返す 」(P.536) 
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リア ル タ イ ム に 年 ・ 月 ・ 日 を 表示 する 


ガブ ジ ェクト 名 = new Date( ) 

ブ ブ ジ ェクト 名 .getYear() [メソ ッ ド ] 
ブ ブ ジ ェクト 名 .getMWIonth() [メソ ッ ド ] 
ガブ ジェ クト 名 .getDate() [メソ ッ ド ] 












計 C-\Sample s\js\D2builtim\01date\15\index.html 一 Mic 


アイ ル ⑥) 編集 (E) 表示) お 気に入り D⑯ ウール ①D ん ルプ (⑪ 
@・ の 回 回 倒 の we 支 5mp 


* リ アル タイ ム に 年 ・ 月 ・ 日 を 表示 する 


|2005.02.24 





サン プル で は 、Date オプ ジェ クト の [getYear0」 メ ソ ッ ド で 年 を 、「getMonth()」 メ ソ ッ 
ド で 月 を 、「getDate0」 メ ソ ッ ド で 日 を 取得 し 、 フ ォ ー ム 内 に 書き 出す 処理 を 0.5 秒 ご と 
に 繰り 返し て いま す 。 

フォ ー ム に 書き 出す 時 に 、 年 は 西暦 の 下 2 桁 を 取得 する の で 4 桁 の 年 号 に 直す 処理 を 、 
月 は 取得 し た 数 値 に 1 を 加え て 10 以 下 の 時 に は 頭 に 0 を 付け る 処理 を 、 日 は 取得 し た 
数 値 が 10 以下 の 時 に は 頭 に 0 を 付け る 処理 を し て いま す 。 

また 、Netscape Navigator 2.0 の メモ リー エラ ー 対 策 と し て 、10 分 後に スク リプ ト を 停 
止 す る 処理 を し て いま す 。 も し 不要 な 場合 は 、「//10 分 後に タイ マー を 止め る 処理 」 の 
コメ ント が ある 部 分 の 1 行 を 削除 し て くだ さい 。 

[getYear0」 メ ソ ッ ド で 取得 し た 値 を 4 桁 の 年 号 に 直す 方 法 に 関し て は 、 付 録 コ ラム の 
[Javascript の 2000 年 問題 ](P.614) を 参照 し て くだ さい 。 


年 Ueee 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta hp-equ1 マ ="Conten-Script-Type" conEen ヒ ="Eext/]avascCript"> 
<meta htp-equiv="ConEenE-Sty1e-Type" content="Eext/css"> 

< 上]e></ 革 1e> 





<Sor1p type=" て ext/avascr1pt"> 
で ! ニ ー 
var TC = 0: 
function Daywatch() { 
if (TC < 1200) { //10 分 後に タイ マー を 止め る 処理 
TC++ : //10 分 後に タイ マー を 止め る 処理 
var Qday = new Date() : 
if ( qay.getYear() >= 2000 ){ var year = qay.getYear() } 
else { var year = day.getYear() +1900 } 
var month = day.getMonth( ) +1 : 
var date = day・.getDate( ) : 
if (month < 10) { / / 月 . 日 が 1 桁 の 時 は 頭 に 0 を 付け る 処理 
month = "0" + month: 
} 
if (date < 10) ({ 
date = "0" + date: 


} 
document .Watch1 .watch1 .Vvalue = year +"."+month+" ."+date: 
setTimeout ( "DayWatch( ) ", 500): 
} //10 分 後に タイ マー を 止め る 処理 
} 
ん 
</ Script> 


<sty1e type="text/css"> 

<!ーー 

body { background-co1or: #EFFFfF: } 
ーー> 

</sty1e> 


</head> 

<body onLoad="DayWatch ( ) "> 

* リ アル タイ ム に 年 ・ 月 ・ 日 を 表示 する 

<D> 

<form name="Watch1 "> 

<1nput type="text" name="watch1" s1ze="15"> 
</ Eorm> 

</p> 

</body> 

</htm1> 
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522 pate オ プ ジ ェ クト 








リア ル タ イ ム に 時 ・ 分 ・ 秒 を 表示 する 


オブ ジェ クト 名 = new Date() 
ブ ブ ジ ェクト 名 .getHours() 
ガブ ジ ェクト 名 .getWrinutes() 
ガブ ジェ クト 名 .getSeconds() 






アイ ルル (FE) 編集 表示 お 気に入り ツー ル ①D ヘル プ ⑪ 


GO の 回 還る の ws 玄 mc 














アイ ル ⑤) 計 集 E) 表示 お気 に 入 D⑯ ウー ル D へ ルプ ⑪ 
Os の 還る の 支 pmco 


ォ * リ アル タイ ム に 時 * 分 * 秒 を 表示 する 













2222.21 


当 CYSampleswjsY021 


アイ ル (P 編集 








お 気に入り (@) ツー ル ①D ヘル プ ⑪ 


GO 国 還 人 人 の ws smoo 





ォ リ アル タイ ム に 時 * 分 * 秒 を 表示 する 


22.22 





22 


[メソ ッ ド ] 
[メソ ッ ド ] 
[メソ ッ ド ] 












引 C-Y5amplcsYjs\02builtin\01dateY16Windexhtml - Mic. | 


プア イル 編集 D 表示 お 気に入り @' ウール D AM プ ⑪ 


の 回 還る の es 支 mo 











2223 


ォ * リ アル タイ ム に 時 ・ 分 * 秒 を 表示 する 






サン プル で は 、Date オプ ジェ クト の 「getHours()」 メ ソ ッ ド で 時 間 を 、「getMinutes()」 メ 
ソ ッ ド で 分 を 、「getSeconds()」 メ ソ ッ ド で 秒 を 取得 し 、 フ ォ ー ム 内 に 書き 出す 処理 を 0.5 


秒 ご と に 繰り 返し て いま す 。 


フォ ー ム に 値 を 書き 出す 時 に 取得 し た 各 数 値 が 10 以下 の 場合 、 頭 に 0 を 付け る 処理 を 


し て いま す 。 


また 、Netscape Navigator 2.0 の メモ リー エラ ー 対 策 と し て 、10 分 後に スク リプ ト を 停 
止 す る 処理 を し て いま す 。 も し 不要 な 場合 は 、「//10 分 後に タイ マー を 止め る 処理 」 の 


コメ ント が ある 部 分 の 1 行 を 削除 し て くだ さい 。 









| samplc 王 呈 還 


< く !DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1><head> 
<meta htp-equ1v="Content-Script-Type" Conten 上 =" 上 ext/ avascr1D"> 
<meta htp-equiv="ConEent-Sty]1e-Type" content="text/csS"> 
<1 上 ]e></ 上 1 上 1e> 
<SCr1pt type="Eext/]avaScrip 上 "> 
Jr 
var TC = 0: 
function Timewatch() { 
if (TC < 1200) { //10 分 後に タイ マー を 止め る 処理 
WC* キ 3 //10 分 後に タイ マー を 止め る 処理 
var time = new Date( ) : 
Yar hour = ime.getHours( ) : 
var min = time.getMinutes( ) <a 有 ね 
var sec = time.getSeconds ( ) : /E5-7 
if (hour < 10) { // 時 ・ 分 ・ 秒 が 1 桁 の 時 は 頭 に 0 を 付け る 処理 


hour = "0" + hour: 


(の リコ た ア 4 


Opea6 


リア 所 


} 
if (min < 10) ({ 
min = "0" + min: 
} 
if (sec < 10) 【{ 
SeC = "0" + 8eoz 
} 


document .Watch2 .watch2 .value = hour+!:!+m1n+!:! 寺 SeCz 
setTimeout ("TimeWatch()", 500): 
} //10 分 後に タイ マー を 止め る 処理 


} 
の つこ: 
</ script> 


<sty1e type="Etext/css"> 

3 は っ 

body ( background-co1or: #EFEFFF: } 
ーー テ 

</ style> 

</head> 

<body onLoad= "Timewatch ( ) "> 

* リ アル タイ ム に 時 ・ 分 ・ 秒 を 表示 する 

< く D> 

<form name="Watch2"> 

<input type="text" name="watch2" size="15"> 
</ form> 

< く /p> 

</body></htm1 > 
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一 居 応 弟 靖 吾 民 ・ 革 m 


4 pe オラ ジェ クト 





時 間 ご と に 違っ た メッ セー ジ を 表示 する 


オブ ジェ クト た 名 = new Date() 
オブ ジェ クト 名 .getHours() メソッド ] 
















アア イル 編 業 (D 表示 ⑰ お 気 に 和 AD ウー- ル D ^ ル 2 


Os - の 加 人 の の w 吉 smoo 


アイ ル (D 騙 業 ) 表示 お 気 に 和 D⑯ ツ - ル ①D へ JM プ ゆ 
Gm- の 加 人 の の we 安 smoo 
48 寺 間 こ と に 違っ た メッ セー ジ を 表示 する 
19 時 の メッ セー ジ 













 C-Y5amplesWjsWD2builtimW01dateW17Windexhtml - Mi 


アイ ルル 集 ⑰) 表示 お 気 に 和 AD(A) ウ - ル D へ 0⑬ 
@ 〇 の 回 還る の ms 宮 5mop 
+ 時 間 ご と に 違っ た メッ セー ジ を 表示 する 
20 時 の メッ セー ジ 





サン プル で は 、HTML ファ イル が ロー ド さ れ た 時 に 、 関 数 [geh()」 内 の 「h.getHours()」 
が 時 間 の 値 を 取得 し て 、 そ の 値 を 「function geth(①){ 一] 内 の 文 で 参照 し 、 時 間に合わ 
せ た メ ッ セ ー ジ を 表示 し て いま す 。 

メッ セー ジ 部 分 に 「<img src='URL'alt=xxx' width="xxx" height="xxx">」 と 画像 を 表示 す 
る タグ を 書け ば 、 時 間 に よ っ て 違っ た 画像 を 表示 する こと も で きま す 。 

サン プル の よう に 1 時 間 ご と に ひと つの メッ セー ジ を 設定 し て いる 場合 は 、 本 当 は 王 文 
を ネス ト ( 入 れ 子 ) に する 必要 は あり ませ ん 。 数 時 間 ご と に 処理 を 行う 方 法 は 、「 時 間 に 
よっ て 背景 画像 を 変え る (次項 ) を 参考 に し て くだ さい 。 


<SCr1pt type=" ex 上 /]avaSCript"> 


に 

Yar mO = "0 時 の メッ セー ジ !: 
Yar m1 = "1 時 の メッ セー ジ ": 
var m2 = "2 時 の メッ セー ジ ": 
var m3 = "3 時 の メッ セー ジ ": 
var m4 = "4 時 の メッ セー ジ ": 
Yar m5 = "5 時 の メッ セー ジ ": 
Yar m6 = "6 時 の メッ セー ジ ": 
Yar m7 = "7 時 の メッ セー ジ !": 
Yar m8 = "8 時 の メッ セー ジ ": 
var m9 = "9 時 の メッ セー ジ ": 


Yar m10 = "10 時 の メッ セー ジ ": 





var m11 
Var m12 
Var m13 
Var m14 
Yar m15 
var m16 
var m17 
Var m18 
var m19 
var m20 
var m21 
var m22 
var m23 


= "11 時 の メッ セー ジ *: 
= "12 時 の メッ セー ジ ": 
= "13 時 の メッ セー ジ ": 
= "14 時 の メッ セー ジ ": 
= "15 時 の メッ セー ジ ": 
= "16 時 の メッ セー ジ ": 
= "17 時 の メッ セー ジ ": 
= "18 時 の メッ セー ジ ": 
= "19 時 の メッ セー ジ ": 
= "20 時 の メッ セー ジ ": 
= "21 時 の メッ セー ジ ": 
= "22 時 の メッ セー ジ ": 
= "23 時 の メッ セー ジ ": 
function geth(t) { 


1fF (上 ==0) document .write( m0O ): 
e1se { 1f (上 ==1) document .write( 
el1se { ifF (上 ==2) document .write( 
else { if (上 ==3) document .write( 
el1se { 1f (t==4) document .write( 
e1se { if (t==5) document .write( 
e1se 人 1f (上 ==6) document .write( 
e1se { 1f (上 ==7) document .write( 
e1se { if (上 ==8) document .write( 
else ( if (上 ==9) document .write ( 
else { if (上 ==10) document .write( 
else { 1f (t==11) document .write( 
el1se { if (上 ==12) document .write ( 
else { if (上 ==13) document .write( 
else { if (t==14) document .write( 
else { if (t==15) document .write ( 
else { if (t==16) document .write ( 
el1se { ifF (上 ==17) document .write( 
el1se { if (t==18) document .write( 
else { if (t==19) document .write( 
else { if (t==20) document .write ( 
else { if (t==21) document .write ( 
el1se {( if (上 ==22) document .write( 
e1se { if (==23) document .write( 
}}}})}}}}}}}}}})}}}} }) ) } 
} 
//--> 
< く / SCr1D セ > 
て 中 略 
<SC エ ip ype="Eex/]avascr1p 上 "> 
< 小 ニ ニ 
h = new Date() : 
geth (h .getHours( ) ) : 
//--> 


</ SCr1D> 
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時 間 に よ っ て 痛 景 画像 を 変え る 


ガブ ジェ クト 名 = new Date() 
Pr オブ ジェ クト 名 .getHlours() ぱ ソ ッ ド ] 
Moz/a 


トコ に コ 品 訳 
に 3 に 1 ょ pp 
に 3 に 3 に 】 に 】 い 1 に ) 


4.06 
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Ope/a6 


圧 5-mac 
左 mac 





【 の dPESEIMTTITEUPDOAI は IT は 3.11.] 還 当 
p 


アイ ル (P) 編集 ) お気 に 入 D ツー ル ① へ ルフ 0⑬ 


GO*・ の 回 回 の の we 支 5moo 





アイ ル ⑥ 編集) 表示 お 気に入り Q) ツー ル ① 人 ルプ ⑪ 


GR・ の 回 回 人 の の ww 支 Pmo 


rmsaasss as 





Netscape 6.0 で は 、DOM の 採用 に よっ て 、 背 景 画像 を JavaScript を 使っ て 操作 する こ 
と が 可能 に な り ま し た 。 し か し 、 そ れ 以 前 の バー ジョ ン の Netscape Navigator で は 、 育 
景 画像 を 操作 する こと は で きま せん で し た 。 

その た め サ ンプ ル で は 、</head> と <body> の 間 に 、 時 間 に 応じ た 背景 画像 の 指定 を 含 
む <body> を 書き 出す よう に し て いま す 。 

<body> の 中 に 、 画 像 だ け で な く 、 フ ォ ン ト の 色 な ど を 指定 し て も 評価 き さ れ ます 。 け れ 
ども 、<body> が ふた つ あ る こと に な る の で 、HTML の 文法 的 に は あま り 正 し いと は い 
入ら ま 870e 
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ーー 


< く !DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1l> 

<head> 

<meta htEp-equ1 マ ="Content-Socript-Type" content="text/]avascript"> 


6 Fre7ox 
< 上 it]1e></ 上 1 上 1e> ー 


oz 
<Scr1ipt ype=" て ext/]avascript"> し 
く ! -- 
function geth (上 ) { 
1f (<=5) document .write("<body background='BACK1 . pg '>") : 

e1se { if (<=11) document .write( "<body 2 
jpg'>") : 
else { if (<=17) document .write ( "<body background='BACK3 . 
Jpg'>") : 

else { 1f (<=23) document .write ("<body background='BACK4 . 


同 
同 


jpg ">") : 
0 半角 】 

} 

7/ こ ニテ 

</ Script> 


</head> 


<SCr1pt ype="Eext/]avascript"> 
で 洲 ー ロ 
h = new Date( ) : 
geth (h .getHours( ) ) : 
// --> 
< く / SCr1Dt> 


<body> 

* 時 間 に よ っ て 背景 画像 を 変え る 

く D> 

0 時 て 5 時 : BACK1 . pg の 画像 <br> 

6 時 11 時 : BACK2 . pg の 画像 <br> 
12 時 て 17 時 : BACK3 . jpg の 画像 <br> 
18 時 23 時 : BACK4 . pg の 画像 

< く /p> 

</body> 

</htm1> 
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自然 対数 の 底 を 返す 


WIath. 互 [プロ パテ ィ ] 


CV5amplesYjsY02builtmY02ma fmdexhtml- Mi 


アイ ル (5) 編集 D 表示 お気 に AD ウー ル D ヘル ブ ⑳⑪ 


@ ま の 回 還る の 時 支 Bmoo 


+ 自 然 対数 の 族 を 返す 


2718281828459045 





[E] プ ロ パ ティ は 、 自 然 対数 の 底 ( オ イラ ー 定 数 ) の 値 を 持っ て いま す 。 
この プロ パテ ィ は 、 読 み 出し 専用 で す 。 


fi 


<script type="text/]avascr1pt"> 
ニー 

document . write (Math. 下 ) : 

//ーー> 

</ scr1pt> 


ae 
e を 底 と する 2 の 自然 対数 を 返す 


[プロ パテ ィ ] 









ファ イル 意 集 D 表示 お気 に AO@) ウー ル ① へ ルプ (⑪ 


G③ ま の 回 回 人 の の 吉 5R29 


*e を 底 と する 2 の 自然 対数 を 返す 


06931471805599453 





「LN2」 プ ロ パ ティ は 、e( オ イラ ー 定 数 ) を 底 と する 2 の 自然 対数 を 持っ て いま す 。 
この プロ パテ ィ は 、 読 み 出し 専用 で す 。 


EDU 間 量 ーー 


<sCript type=" ex 上 /]avaSCr1pt "> 
に た さっ 

document .write (Math . LN2 ) : 

ん 7 と ちち 

< く / SCr1D ヒ > 





1 
e を 底 と する 10 の 自然 対数 を 返す 5 


/E5.0 
Wrath.LW10 [プロ パテ ィ ] 









リル 


太 re7ox 
Moz 廊 a 


アイ ル (上 編集 D 表示 お 気 に 入 D⑯ ツー ル MD へ ルプ GHD 


Om の 回生 の の mw ewo 


*e を 底 と する 10 の 自然 対数 を 返す 4.06 


2.302585092994046 





OperaZ 


xls に に 


Opeya6 
「LN10]」 プ ロ パ ティ は 、e( オ イラ ー 定 数 ) を 底 と する 10 の 自然 対数 を 持っ て いま す 。 Sa ね が 
この プロ パテ ィ は 、 読 み 出し 専用 で す 。 在 5-mac 


| 


<SCr1pt type="text/]avascr1ip ヒ "> 
ベニー 
document .write (Math . LN10 ) : 
//--> 

</ scr1pt> 


aa 
2 を 底 と する 自然 対数 を 返す 


Wrath.LOG2 弄 [プロ パテ ィ ] 


/E4-mac 


演 
算 
す 
る 








EPLUSMS2PTITUU TUUUIUITSSILTILIR 拉 ll 


アイ ル (上 双 集 ) 表示 ⑦ お 気 に A⑱⑯ ツー- ル D へ ル プ ⑪ トコ 


OR・ の 回 の の mw 交 Pmo 


42 を 寿 と する 自然 対数 を 返す 
1.4426950408889633 





「LOG2E] プ ロ パ ティ は 、2 を 底 と する 自然 対数 を 持っ て いま す 。 
この プロ パテ ィ は 、 読 み 出し 専用 で す 。 


<SCr1pt type="Eext/]avascript"> 
りら 

document . write (Math .LOG2 互 ) 
ゲー ニー ニテ 


< く / Cr1D ヒ > 





/ ゴ 2 有 / 
/ 子 利 】 
5.0 
リ イ 和 上 


刀 re7ox 
ん の 2 た 
リル 
W6.X 


4.X 


Opera/ 
Ope7a6 


Sa ね 


リネ 
/4-mac 
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10 を 底 と する 自然 対数 を 返す 


[プロ バ パティ] 


中 CYSamplcsyjsW02buillny02malhw05Yimdcxhtmi- Mi 隔 | 間 | 了 区 
アイル 尽 (D 表示 Q⑦ お 気 に AOQ ウー- ル GD ん JM プ ⑬ コ 
@ ま の 回 国人 る の w 吉 pmoo 


*10 を 寿 と する 自然 対数 を 返す 





04342944819032518 


「LOG10E] プ ロ パ ティ は 、10 を 底 と する 自然 対数 を 持っ て いま す 。 
この プロ パテ ィ は 、 読 み 出 し 専用 で す 。 


ET 電 是 ーーーーーーーー 


<Bscript type="text/]avaScript"> 
く ! ニー 

document . write (Math .LOG10E) : 
//-ー テ 

</ gcr1p セ > 


[プロ パテ ィ ] 





Y5amplesYjsY02buillinwD2mathY06Yindex.html - Mi 


アイ ル (D 編集 (ED) 表示 お 気 に 入 D⑯ ウール D AA2⑪ 


@* の 回 回 の の ws 支 5m2p 


* 円 周 率 を 返す 


3141592653589793 





「PIl] プ ロ パ ティ は 、 円 周 率 を 持っ て いま す 。 
この プロ パテ ィ は 、 読 み 出し 専用 で す 。 


Et 舞 


<sCript type="ext/]avaScCript"> 
で ! ニー 

documen . write (Math .P エ ) : 

八 / ニ ニテ 

< く / SC1p ヒ > 








JavaSciint 


ーー 
hi 
いっ 】 
も こ 】 


1/2 の 平方 根 を 返す 


Wrath.SQRT1 2 [プロ パテ ィ ] 


当 CYSanples\jsY02boiluin\02math\D7\ndex.html - Mi 


アイ ル (P 編集) 表示 お気 に 入 D ウー ル D AM プ (⑪D 


GR の 回 回 全 の mw 支 9ao 


*1/2 の 平方 根 を 返す 


07071067811885476 





「SQRT1_2] プ ロ パ ティ は 、 ル ー ト 2 分 の 1 の 値 を 持っ て いま す 。 
この プロ パテ ィ は 、 読 み 出し 専用 で す 。 


EE 提 L___ 


<script type="text/]avascript"> 
に りつ 

document .write(Math.SORT1 2): 

が / デ ーー 

< く / SCr1pt> 


[プロ パテ ィ ] 





イル E) 馬 集 () 表示 お 気 に 和 DA) ? 


OR の 回 回 人 の の ma 吉 woo 


*2 の 平方 根 を 返す 


1.4142135623730951 





「SQRT2]」 プ ロ パ ティ は 、 ル ー ト 2 の 値 を 持っ て いま す 。 
この プロ パテ ィ は 、 読 み 出 し 専用 で す 。 


ET7 舞 


<ScCript type="Eext/]avascript"> 


GS だ ー 
document . write (Math . SORT2 ) : 
// ニ ー テ 


< く / SC エ ipt> 





ーー 
im 
過 
tn 


| 
mm 
に ご 】 


77re7ox 


// の た 】 


ーー 
S 選 
ュー】 


に コ 
に | 
トコ 


OpeyaZ 


LM406 


EE//』 


Ope/ya6 


圧 5-mac 
圧 4-mac 





店 
の 
ご 


ー 
Im 
に 
上 


店 
m 
に 


過 
いこ 】 


や 
世 


7e7o 
り / 


に 3 


還 
還 


ヒコ 
Re」 
トコ 


Opera/ 


7 


Sa7a// 


Opeya6 


圧 5-mac 
克 2-mac 


の 中 畑 党 


SH2 Wam オ ラジ ェクト 





0 か ら の 絶対 値 を 返す 





[メソ ッ ド ] 


講 C:YSamples\js\02builtin\02math\09\index.html - 有 


アイ ル (E) 編集) 表示 お 気 に 和 AD⑯ ツー ル ① ヘル プ ⑬ 
G・ の 回 還 人 の の 時 殊 5mo 


*0 か ら の 絶対 値 を 返す 


5 
5 





[abs0」 メ ソ ッ ド は 、n の 0 か ら の 絶対 値 (0 か ら の 距離 ) を 返し ます 。 
サン プル の 通り 、「-5] も 「5] も 、「$] と な り ま す 。 


ETTE 拉 ーー 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta http-eguiv="Content-Script-Type" content="text /]avascr1pt"> 
<meta htp-equiv="Content-Sty1e-Type" content="tex 上 /CS8"> 
<t1t1e></ 上 ュ 1 ヒ 1e> 

<style type="text/CS8"> 

ーー 

body { background-co1or: #EEEFfF: } 

に エー 

</ sty1e> 

</head> 

<body> 

*0 か ら の 絶対 値 を 返す 

ぐ D> 

<script type="text/]avasCr1pt"> 

<!ーー 

document . write (Math .abs ( -5) ) : 

document .write ("<br>" ) 

document .write(Math.abs(5) ) : 

ん ニー 

</ SCr1D キ > 

く /p> 

</body> 

</htm1> 





四捨五入 し た 数 値 を 返す 





[メソ ッ ド ] 





良 C-\Samples\js\D2builtin\02math\10\index_html- Mi | 回 上 に 


アイ ル ) 編集 (E) 表示 お 気 に 入 D⑱ ツー ル D 人 ルプ ⑪ [ コ 
@5・ の 6 回 還 倒 の 


* 四 捨 五 入 し た 数 値 を 返す 





Iround)]」 メ ソ ッ ド は 、 n の 小数 第 1 位 を 四 捨 也 入 し た 数 値 を 返し ます 。 


|Samnlc 王 還 


< く !DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1] / /EN"> 
<htm1> 

<head> 

<meta http-equiv="Content-Script-Type" content="text/]avascript"> 
<meta htp-equ1v="Content-Sty1e-Type" content="text/css"> 
< 上 it 上 ]e></ 上 1 上 1e> 

<sty1e type="text/css"> 

トー 

body ( background-co]1or: #EEFFFF: } 

ーー テ 

</ sty1e> 

</head> 

<body> 

* 皿 捨 五 人 し た 数 値 を 返す 

< く D> 

<SCr1pt type="Eext/]avascr1pt"> 

に ーー 

document .write(Math.round(5.49) ) : 

document . write ( "<br>" ) : 

document . write (Math . round ( -5 .64) ) : 

//--> 

< く / Sor1Dt> 

く /p> 

</body> 

</htm1> 








広 
の 
〇 


Lu ll 
nm 
【ー】 い 。| 


3/ の 1 
Moz/a 


Ope/aZ 
Ope/a6 


ミ 世 誠に 回 
< SKK ご こ 】 


Sa な ね // 


圧 5-mac 
リズ Es 


の 所 注 





庫 所 誠 
AM に Jl bu 
に 3 いい 


トコ 
G 


7ox 


Opera/ 


ミ 
に < に 3 に 3 トコ 


Opeya6 


Sa ね // 


圧 5-mac 
存 4-mac 


sw 


534 Wam オ ララ ェ グ | 












n,m を 比較 し て 小さ い 方 の 数 値 を 返す 


[メソ ッ ド ] 





*mm を 比較 し て 小さ い 方 の 数 値 を 返す 


1 


[min0」 メ ソ ッ ド は 、n と m を 比較 し て 小さ い 方 の 数 値 を 返し ます 。 
[max0」 メ ソ ッ ド と 逆 の 働き を し ます 。 


EYE 生 LIL.... 


<SCr1pt type=" tex 上 /avaScr1pt"> 
く ! ーー 

document .write(Math.min(1,5) ) : 
ソー ニム 

</ SCr1D セ > 


enayesvoroasreeo を SI 
n,m を 比較 し て 大 きい 方 の 数 値 を 返す 


Iath.max( ヵ , 2) [メソ ッ ド ] 









ファ イル 騙 集 () 表示 お 気 に ADQ ツウ - ル D へ M プ ⑪ 尊 


OR・ の 回 回 る の w 宮 smoo 


ヨ CYSampleswjsw02builtinW02mathW12Windexhtml- Mi 


*nm を 比較 し て 大 きい 方 の 数 値 を 返す 


5 





[max()」 メ ソ ッ ド は 、n と m を 比較 し て 大 きい 方 の 数 値 を 返し ます 。 
[min0」 メ ソ ッ ド と 逆 の 働き を し ます 。 


ED 揚 も 


<SCrip type= "上 ex 上 /aVvaSCript "> 
Sh と 

document .write(Math maxr(1,5) ) : 
ルム ニ ロス 

</ Script> 





も っ と も 近く て 小さ い 整 数 を 返す 





[メソ ッ ド ] 


計 C:\Samples\js\02builtin\D2math\13\index.html - Mi 


イル) 編集 E) 表示 ) お 気 に 和 D⑳⑩ ツー- ル ① ヘル プ ⑪ 
G・ の 回 回 人 の の ww 支 Pmo 


* や っ と も 近く て 小さ い 整 数 を 返す 





「foor0」 メ ソ ッ ド は 、n に も っ と も 近く て 小さ い 整 数 を 返し ます 。 
「ceil0]」 メ ソ ッ ド と 逆 の 働き を し ます 。 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta http-equiv="ConEent-Socript-Type" conten 上 ="Eex 上 / avascript"> 
<meta http-equiv="ConEent-Sty1e-Type" content="text/cCss"> 
< 上 it]e></ 上 it1e> 

<style type="text/css"> 

沙 っ ニ 

body { background-co1or: #EEFEFF: } 

ーー テ > 

</ sty1e> 

</head> 

<body> 

* も っ と も 近く て 小さ い 整 数 を 返す 

<D> 

<SCript type="Eext/]avaScr1pt"> 

ニテ 

document .write (Math .F1oor(5.2) ) : 

document . write ( "<br>" ) : 

documen . write (Math .E1oor ( -5.2) ) : 

//-ー> 

< く / SCr1p> 

く /p> 

</body> 

< く /htm1> 









店 m 
ロ IO 
いい トー】 


ーー 
証 
に 
に 】 


///e7ox 
y7// た 


こ 
国 国 回 
いこ 】 


に 
さ 
トコ 


ヒコ 
に JJ N 
トコ 


ミド 
< 民 


リコン ア 4 
の リコ ルリ 


ト F) た 7// 


話 5-mac 
旋 4.mac 


の 提 上 





リ 子 入 】 
/5.0 


0 


EdE』 加 E. 
還 記 

還 ド 9 5 回 
ト ま 3 し ー】 【ー】 


=|= 
RI 
に 3 上 


Ope/aZ 


7 


Sa ね / 


Opeya6 


放 5-max 
大 4-mac 


cw 用 





も っ と も 近く て 大 きい 整数 を 返す 


[メソ ッ ド ] 


ET の FTJJSEiUMTHITEUMJFL4EEIT は 3 


アイ ル ) 編集 (E) 表示 ) お 気 に AD⑯) ツー ル ①D ヘルプ 


GO 回 引 人 の の mmoo 


+* や っ と も 近く て 大 きい 整数 を 返す 


「ceil0]」 メ ソ ッ ド は 、n に も っ と も 近く て 大 きい 整数 を 返し ます 。 
[floor0」 メ ソ ッ ド と 逆 の 働き を し ます 。 


| Samplc 間 還 


<!DOCTYPE HTMIL, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona] / /EN"> 
<htm1> 

<head> 

<meta http-equ1iv="Content-Socript-Type" conEent="Eext/]avaScript"> 
<meta http-equ1iv="ConEent-Sty1e-Type" Content=" 上 ex 上 /CSS"> 
< 上 1 上 1e></ 上 it]1e> 

<sty1e type="text/css"> 

く ! ーー 

body { background-co1or: #EEEFFF: } 

ーー 

</ sty1e> 

</head> 

<Dbody> 

* も っ と も 近く て 大 きい 整数 を 返す 

<Dp> 

<SCript ype="text/]avascr1ipt"> 

く ! ーー 

document .write (Math.cei1(5.2) ) : 

document .write ("<br>" ) : 

document .write (Math .cei1 (-5.2) ) : 

//-ー> 

< く / SCr1p キ > 

く /p> 

</body> 

</htm1> 


So Mem オラ ジェ クト 





JavaScript 


当 
hil 
1 
の 1 


LE も うす を 


ーー 
Ll 
Km 
ーー】 


店 
aa 
ご コ ) 


[メソ ッ ド ] 


に 3 


= ミ 思 
S 加 
き 記 


アイル 尽 ⑰) 表示 お 気 に 入 DQ⑯ ウー ル D ヘル ブ ⑪ 圭 


OO 回 回 の の we 実 swc 


*n の m 乗 を 返す 
25 


「pow0」 メ ソ ッ ド は 、 n の m 乗 の 数 値 を 返し ます 。 


LSomnlo 王 還 


<SCr1pt ype="Eext / avaSCr1pt"> 
Ex 
document .write (Math .pow(5,2) ) : 

の ロー 

</ SCript> 


Mk satokasatg2tAACagcaoeSYREEI の SSR 
X。y 座標 か ら 角 度 を 返す 
WIath 


に 
< 


還 国 加 ド 
< に 





リリ コー ア 4 
Opeya6 









EICJ』 
克 5-mac 
4-7mac 





・atan る 8( テ ,) [メソ ッ ド ] 


5 Csomplesiey02boi 


アイ ル () 編集 表示 お 気 に 和 0⑯ ウツ - ル CD AM プ ⑪ 


@・ の - 還 還付 の we 誠 5w9 





*xy 座 標 か ら 角 度 を 返す 
革 度 





「atan20」 メ ソ ッ ド は 、 xy 座標 か ら 角度 を 求め ます 。 単位 は ラジ アン で す 。 
サン プル で は 、 ラ ジア ン か ら 度 を 求め て いま す 。 
ドキ ュ メ ント 化 は JavaScript1.1 か ら で す が 、 JavaScript1.0 で も 使用 で きま す 。 


EYE 間 し ーー 


<SCript type="text/]avascrip ヒ "> 

ペリー 

document .write (Math .atan2(5,5) * 180 / Math.PT," 度 ") : 
メー ニシ 

</ SCr1p キ > 








= ぼぼ 呈 
ミ 間 

回国 回 国 回 
に 3 に 3 に こ 】 いら | 


ヒコ 
に 
に 3 


ミ 
< 


Opera/ 
Opera6 









EICI/』 
た 5-mac 
話 4-mac 


| 








ee 
平方 根 を 返す 


rath.sqrt( ヵ ) 


玉 C:Y5amplesYjsYD2buiinY02mahY17\mdez html - 上 


アイ ル P) 編集) 表示) お 気 に 入 0⑯) ウー ル ① ヘル プ ⑩ 
Os の 回 引 の の wm 支 Pmoo 
* 平 方 根 を 返す 


1.4142135623730951 


「sqart(0」 メ ソ ッ ド は 、 n の 平方 根 の 値 を 返し ます 。 


|Samplo 


<SCr1p ype="text/]JaVaScr1pt "> 
に コト コー 
document .write (Math . sqrt ( 2) ) : 
// ニ ー テ 

< く / SCr1D キ > 


対数 を 返す 
Math. 


exD( ヵ ) 


妥 CYSamplesYjey02builtinW02mathW18Yindex.html - Mi 


カイル) 編集 (E) 表示 お 気 に 和 AO⑯ ウ - ル D へ ルフ 0⑪ 


@ 中 の 回 国人 の 誠 5R2p 


* 装 数 を 返す 


148 4131591025766 


「exp0」 メ ソ ッ ド は 、 n の 対数 を 返し ます 。 


<SCrip type=" tex 上 /avaSCrip 上 "> 
人 ら こ 

document .wrie (Math.exxp(5) ) : 

2 コ 

く / SC エ 1p キ > 


ON Mam オ ブタ ェクト 











[メソ ッ ド ] 


[メソ ッ ド ] 





ccp 
自然 対数 を 返す 





| Wrath.1og( ヵ ) [メソ ッ ド ] 


名 回 司 回 選 
Ss 詩 よ p 選 選 


に に 
還 
國 


に 3 
ト J 
ト ベ 


GE・ の 回 回 人 @ ms PRoo 


三 
に 
と 3 


* 目 然 対数 を 返す 


16094379124341002 


ミ 
トコ 





Opera7 
Opera6 


[iog0」 メ ソ ッ ド は 、 n の 自然 対数 を 返し ます 。 


Sa ね // 


話 5-mac 
Sample 克 4-mac 
<Sor1p type="text/ avaSCr1p 上 "> 
く ル ニー 
document .write(Math.1og(5) ) : 
// ニ ュ テ 
< く / SCr1p キ > 








サイ ン を 返す 
Wrath.sin( ヵ ) [メソ ッ ド ] 





の 折 上 


ETDUMIUUMTTUTUUA YUU2UTTUSUULUIL 


アイ ル (P) 胃 集 CC) 表示) お 気に入り ⑯ ウツ - ル D へ ルプ ⑪ 
OR・ の 回 引 人 の の me 実 smoo 


* サ イン を 返す 


0479425538604203 





「sim0] メ ソ ッ ド は 、n の サイ ン ( 正 弦 ) の 値 を 返し ます 。 単位 は ラジ アン で す 。 


EE 間 燈 ee 


<SCr1p type="Eext/]avaScr1p 上 "> 
マニ ー 

document .write(Math.sin(0.5) ) : 
/ ニ = タ 

< く / SCr1Dpt> 


Mem オラ ジェ クト 539 





ピー レ ルス 7 


[メソ ッ ド ] 


builtimW02math lexhtml- Mi 


アイ WCD 5 表 わ % 和 DO ツー ル O へ M フ CO | 専 
〇 や の 引 の の 宮 pmoo 
* コ サイ ン を 返す 


08775825618909728 





「cos0」 メ ソ ッ ド は 、n の コサイン (余弦 ) の 値 を 返し ます 。 単位 は ラジ アン で す 。 


ED 間 隊 ーー 


<8Cr1pt type="tex 七 / avVaScript 上 "> 
3 ニニ 

document .write(Math.cos(0.5) ) : 

ん ーー と 

</ script> 


.5a7 ね // 
圧 5-mac 
左 4ma | 





[メソ ッ ド ] 


malhY22Windexhtml- MM 


アイ ル ⑥ 編集 5 お 気 に 入 0⑯ ツール D AM プ ⑪ 
@・ の 回 還る の 支 5 


* タ ンジ ェ ン ト を 返す 


05463024898437905 





「tan0」 メ ソ ッ ド は 、n の タン ジェ ント ( 正 接 ) の 値 を 返し ます 。 単位 は ラジ アン で す 。 


|Samnle 還 還 


< く SC エ 1Dp ype=" ex 上 / avVaScr1pt"> 
に ここ 
document .wriEe (Math .tan(0.5) ) : 
// ニ ニ p 

< く / SC エ 1p セ > 


30 Wam オ プシ ェクト 








| Wrath.asin( ヵ ) [メソ ッ ド ] 


ヨ CYSamplesYjsYh2bunltinY02mathY23Yimdex html - Mi 
イル 田 人 ⑤ 表示 Q お 気 に AD④ ウー ル QD ヘル プ 


〇 の 回 加 人 の の m smoo 


05235987755982989 





「asinO0」 メ ソ ッ ド は 、n の アー クサ イン ( 逆 正弦 ) の 値 を 返し ます 。 単位 は ラジ アン で す 。 
n に は -1 か ら 1 ま で の 数 値 が 入 り 、 そ れ 以外 の 場合 に は 0 を 返し ます 。 


ED 揚 = 


<8cript ype="Eext/]avasCr1pt"> 
く ! ニー 

document .write(Math.asin(0.5) ) : 
// ら こら 

</ scCr1pt> 


アー クコ サイ ン を 返す 
Iath.acos( ヵ ) [メソ ッ ド ] 





アイ ル (D 加 集 () 表示 お に 入 0⑯ ウーAGD へ 2 L コ 


@・ の 回 の の 時 bR29 


* ア ー ク コサイン を 返す 


10471975511965976 





「acos0]」 メ ソ ッ ド は 、 n の アー クコ サイ ン ( 逆 余弦 ) の 値 を 返し ます 。 単位 は ラジ アン で す 。 
n に は -1 か ら 1 まで の 数 値 が 入り 、 そ れ 以 外 の 場合 に は 0 を 返し ます 。 


Sun 王寺 


<SCr1p type=" tex / avaSCr1pt"> 
すけ 

document . write (Math .acos( 0.5) ) : 
が =ー シ 

</ Script> 


| 
に 
に 】 


思 
im 
Jud 
に 】 [| 


中 
トコ 
トー〕 


太 re7ox 
Moz/a 


回 還 に 
トコ トコ 


ミ 
< 


OperaZ 
Opera6 


Sa7a/7 
話 5-mac 
左 4-mac 










す 
5 








回 回 
4 トー】 


レン オ ャ スス 3 ri 


リ 子 員 / 


- 
に 
ュー】 


[メソ ッ ド ] 


ミ | マ 
還 記 
回 
の 


半 C-\Samples\js\02builtip\D2math\25\imdex.html - Mi 


アイ ル (P) 編集 表示 ) お 気 に 和 DD ツー ル ① ヘル プ ⑪ 
GO 回 回 @ の we 支 5moo 


ォ ア ー ク タン ジェ ント を 返す 


リリ / 
リリ / 


に 
に 3 に 3 


0.4636476090008061 
Ope/a/ 


Opeya6 





「atan0」 メ ソ ッ ド は 、n の アー クタ ンジ ェ ン ト ( 逆 正 接 ) の 値 を 返し ます 。 単位 は ラジ ア 
レ 2 1 


ELLL_ 了 _ 了 ーー 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta http-equ1vV="Content-Soript-Type" content="text/avascript"> 
<meta http-equiv="ConEtent-Styl1e-Type" content="text/css"> 

< 上 1 上 ]1e></ 上 1 上 1e> 


の ぃ 中 炉 細 川 


<style type="text/css"> 

Sa 

body { background-co]1or: #EFFFFF: } 
ーー テ > 


</sty]1e> 


</head> 
<Dbody> 
* ょ アー クタ ンジ ェ ン ト を 返す 


<D> 


<SCr1ip type="text/]〕avaScr1pt 上 "> 
hh 

document .write (Math .atan (0.5) ) : 
/,/ ニ ニテ 

< く / Cr1Dp キ > 


く /p> 


</body> 
</htm1> 


3 Mem オラ ジェ クト 






























記 CYSamples\js\D2builtin\02math\26\indexhtml 時 了 


イル 編集 ) 表示 お 気 に 入 OD⑧ ツー ル ① へ ルプ 
応 ・⑳ - 較 回 の の ws 嘉 5K9 
* 乱 数 を 発生 させ て お み < く じ を 作る 
あな た の 運勢 は : 大 吉 












3 csampleswjsyD2builtm*02math\26Yimdexhtml- Mi 大 | 了 | 


アア イル) 編集 ( じ 表示 D お 気 に 和 AO⑱) ウール CD へ ルフ ⑪ 
@・ の - 由 司る の 宮 x0 
* 乱 数 を 発生 させ て お み < くじ を 作る 
あな た の 運勢 は : 中 吉 






CrY5amplesYjsY02buil 


イル) 編集 













あな た の 運勢 は : 吉 





旨 C:fSamplesWjsy02boillin\02mathW26Wimdex.html- Mi 


アイ ル F) 廊 要 () 表示 ⑦ お 気 に 入 D@⑯ ウー ル D へ プ ⑬ 
@s・ の 回 還る の es 寄 5ROD 
* 乱 数 を 発生 させ て お み < じ を 作る 
あな ね た の 運勢 は : 凶 









アイ ル (P) 編集 表示 ( お 気に入り @ 
の 回 回 人 る の we 宮 5m29 
* 品 数 を 発生 させ て お み < くじ を 作る 
あな た の 運勢 は : 大 凶 


Irandom()」 メ ソ ッ ド は 、0 か ら 1 ま で の 乱数 を 返し ます 。 


サン プル で は 、「Math.random()」 で 発生 し た 乱数 の 値 を 、 関 数 [Unsei)」 内 の 処理 で 参照 
し 、 そ の 値 に よっ て 書き 出す 文字 を 変更 する こと に よっ て 、 ペ ー ジ が ロー ド さ れる ご 
と に ラン ダム に 表示 され る 文字 が 変わ る お みく じ を 作っ て いま す 。 

Netscape Navigator2.X は 、UNIX 版 の み 作動 し ます 。Windows 版 の Internet Explorer 3.0 
以降 と て 、 す べ て の OS の Netscape Navigator 3.0 以降 の ブラ ウザ で 、 正 常に 作動 し ます 。 


Mn オラ ジェ クト 5 


⑰ お 気に入り @⑯ ツウ - ル ⑪D AI プ ゆ 
GO の 回 加 人 の の wm 支 pmoo 


* 和 数 を 発生 させ て お みく じ を 作る 


Sa7 ね // 
リエ 
リア 








太 re7ox 
ルツ 

リリ リル 
_A6.X 
_ 4.06 
_W4X 








<!DOCTYPE HTMTL PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 


<htm] ><head> 


<meta htEp-equiv="Content-Script-Type" Content="text/]avascript"> 
<meta htEtp-equ1V="Content-Sty1e-Type" content="text/css"> 


< 上 1 上 1e></ 上 1 上 1e> 


<SCr1pt type="text/]avascr1ip 上 "> 
GS. ニニ 

Var Omikuz10 = "大 吉 ": 

var Omikuzi1 = "中 吉 ": 

var Omikuzi2 = "小吉 ": 


var Omikuz13 = " 吉 ": 
var Omikuz14 = "末吉 ": 
var Omikuz15 = " 図 ": 
var Omikuz16 = "大 凶 "j 


function Unsei (n) { 


1f (n<=0.15) document.write( Omikuz10.bo1d() ): 


else { if 
e1se 


{ 
else { 
else { 
else { 
else { 

}}}}} } 
} 
7/ ニ ニレ 
</ Script> 


<Sty]e type="Etext/css"> 

|= ニ 

body ( background-co]1or: #EEFFfFf: 
ーー テ 

</ sty1e> 


</head> 

<body> 

* 乱数 を 発生 させ て お みく じ を 作る 
く D> 


あな た の 運勢 は : 


<SCr1pt type="text/]avascript"> 
om 

Unse1 (Math .random( ) ) 

人 / ニ ニタ 

く / Cr1Dp キ > 


く /p> 
</body></htm1> 


(n<=0 .3) document .write( Omikuzi1 .bo1d() ): 
1f (n<=0.45) document .write( Omikuzi2.bo1d() ): 
if (n<=0.6) document.write( Omikuzi3.bo1d() ): 
tf (n<=0.75) document.write( Omikuz14.bo1d() ): 
1f (n<=0.9) document .write( Omikuzi5.bo1d() ): 
1f (n<=1 ) document .write( Omikuzi6 .bo1d() ): 


} 


に た コー レス 」 了 王 ま ) 


文字 烈 .fontcolor( " 双 若 定 ") [メソ ッ ド ] 


委 CYSamples\js\D2builtin\03strne\01\imndex.html - Mi 同 
アイ ル ⑤) 編集 表示 お 気に入り ⑯ ツー ル ①D へ ルプ ⑪⑬ 


@ ま の 国人 の の 5m29 
+ 文 字 中 を 指定 する 


文字 色 を 指定 する 
文字 色 を 指定 する 


[fontcolor0] メ ソ ッ ド は 、 文 字 列 の 色 を 指定 し ます 。 
<font color=" 色 指定 "> と 同じ 働き を し ます 。 
色 指 定 は 、 色 の 名 前 か 16 進数 で 設定 し ます 。 


ee 


<SCript type="Eex 上 / avaSCr1pt 上 "> 





く ! ニー 

document . write(" 文 字 色 を 指定 する " .Eontco1or ("green" ) ) : 
document . write ( "<br>" ) : 

document .write(" 文 字 色 を 指定 する " .Eontco1or("FF0000") ) : 
/ /--> 

</ script> 


(2 色 指 定 : 「 巻 未 付録 」 の [「 カ ラー チャ ー ト 1 一 3] (巻末 ) 


文字 列 に 複数 の 効果 を 与え た い 時 は 

文字 列 を 修飾 する 時 に 複数 の 効果 を 同時 に 出し た い 場 合 は 、 文 字 列 の 後に その 効 
果 を 与え る メソ ッ ド を 並べ て 記述 し ます 。 

た と えば 、 文 字 列 を 太 文字 に し て 、 色 を 付け 、 信 体 文字 に する 場合 は 、<script> 
内 で 次 の よう に 記述 し ます 。 


document .write( "文字 列 " .bo1d ( ) . Eontco1or ( "green" ) . 1ta1ics ( ) ) 


ちな み に 、 こ の スク リプ ト は 、HTML で 次 の よう に 記述 する の と 同じ で す 。 


<b><Font co1or="green"><i> 文字 列 </1></ Eon モ ></b> 
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トド 
に 3 
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のり コア 


ミ 
に コ 


Ope/a6 


Sa7a// 


圧 5-mac 
話 4-mac 


ひい 寺 藩 具 当 壮 潤 上 


ao ォ フタ ェクト 5 


語 
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店 
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に た ユイ よー) 


文字 列 .big() [メソ ッ ド ] 





( り 


EE』 回 
に 間 記 】 | 
還 E 回 国 
EE 者 【 こ 3 に 


委 CYSamplesYjsY02builmWi じ ] | 区 








リリ リル,6 アイ ル 罰 業 ) 表示 rm Pr 8 商 
|_A4.06 | * 文 字 を 大 きく する 
A4.X 文字 を 大 きく する 






Opea/ 


Ope/a6 
本 蓄 』「bigO」 メ ソ ッ ド は 、 文 字 列 を 通常 より 大 き な 文 字 で 表示 し ます 。 
府 間 幸 蘭 <bip> と 同じ 働き を し ます 。 


夏 4-mac 





| Samnlo 


く SCr1D ype="Eex/]avaSC エ ip 上 "> 

で = ニー 

document .write ("文字 を 大 きく する " .big() ) : 
/ が ニーp 

< く / SCr1pt> 









文字 を 小さ くす る 








文字 烈 .small( ) [メソ ッ ド ] 


カイル 紀 集 (CE) 表示 ⑦ お 気に入り ⑯ ウー ル GD へ ルプ 


G 呈 の 回 引 人 の の me 支 imoo 





lsmall0] メ ソ ッ ド は 、 文 字 列 を 通常 より 小さ な 文字 で 表示 し ます 。 
<small> と 同じ 働き を し ます 。 


ETOO 間 LL___ 


く SC エ 1p 上 ype="Eex 上 /]avaScr1ipt"> 

に 

document .write ("文字 を 小さ くす る " . sma11 ( ) ) : 
ん ニー ニッ 

</ SC エ 1D キ > 


36 amn オラ ジェ クト 





フォ ント の サイ ズ を 指定 する 


文字 列 .fontsize( ヵ ) 


イル) 寿 集 ) 表示 お 気 に 和 DOQ ウー ル D ヘル プ ⑪ 


@・ の 回 還る の 実 smoo 


* フ ォ ン ト の サイ ズ を 指定 する 


フォ ント サイ ズ を 指定 する 





[fontsize()」 メ ソ ッ ド は 、 文 字 列 の フォ ント サイ ズ を 指定 し ます 。 
<font size=n> と 同じ 働き を し ます 。 


ETU 間 昨 ーーーーーーーーーーー 


<sCript ype="Eext /aVaSCr1pt"> 

<! ーー 

document .write ("フォ ント サイ ズ を 指定 する " .Eontsize(5) ) : 
ルー ニョ み 

</ SCr1pt> 


aaa 


太字 (ボー ルド ) に する 





文字 列 .bold() 


TNIU2TUTUUKRT2UTSAUULIEILIIS= 


アイル MO 信 委 6) 表示 ⑰ お 気 に 和 0 ウー ル ① へ ルプ ⑪ [上 
GO の 回 回 の の mw 宮 5moo 


* 大 字 ( ボ ー ル ド ) に する 


太字 に する 





「bold0」 メ ソ ッ ド は 、 文 字 列 を 太 文字 (ボー ルド ) に し ます 。 
<b> と 同じ 働き を し ます 。 


ETTE 半 L 


<soript type="ex/ avaSC エ 1pt "> 
に < ea 

document .write ("太字 に する " .bo1d( ) ) : 
//-ー> 

< く / SCr1Dp セ > 


[メソ ッ ド ] 





[メソ ッ ド ] 





/E6.0 
リ 子 呈 】 
リ 也 
リズ 


妨 re7ox 
Moz/a 


4.06 


OperaZ 


ー コ ヒコ トコ 
ミド 選 
に に 3 トコ 


Opera6 


Sa ね // 
/ た 5-mac 


E4-mac 


ーー 三 
ーー 

6 

記 

列 

を 

1 

る 


who オフ ジェ クト 547 


4 
宮 
り 
人 
す 
る 








> た コリ ルレ ルン ノー) 


文字 列 . 慈 alics() [メソ ッ ド ] 









ヨ C-Y5amplcs*sf02builtiny09ctr 


アア イル 力 業 ) 表示 OCT この ル 】 
* 絆 体 文字 (イタ リッ ク 体 ) に する 
話 拓 丈 学 に ずる 






[italics0」 メ ソ ッ ド は 、 文 字 列 を 斜体 文字 に し ます 。 
<> と 同じ 働き を し ます 。 


Sampnle = 
< く Script type="tex ヒ 上 /]avascript"> 
に リー 
document .write (" 筑 体 文字 に する " .ita1ics() ) : 
// ニ = テ > 
< く / scr1pt> 


ea 
削除 文字 に する 












文字 列 .strilke() メソッド ] 


CuW5amploeWjsY02builtinY03gl 


アイ ル ⑥ 引 集 ぼ 表示 お 気 に 和 ⑯ ウ - ル D AM2⑪ 


@ の 回 較 人 の の ss 到 5m9 


* 削 除 文字 に する 
表 除 区 字 に する 





「srike0」 メ ソ ッ ド は 、 文 字 列 を 削除 文字 に し ます 。 
<strike> と 同じ 働き を し ます 。 


く SCFip tyDpe=" て ex 上 /avascCr1p"> 

に 

document .wri te ( "削除 文字 に する " .striike() ) 
が なー コテ 

く / SCr1p キ > 


6 am オラ ジェ クト 


リズ 央 / 
リネ 】 
/E5.0 
リル 


上 付 文字 に する 


文字 列 .sup() [メソ ッ ド ] 


re7ox 
oz/a 


CYSemplesyjsY02buitimw03 


アイ ル ① 旨 生 6) 表示 お 気に入り ツー ル (D へ ルプ 0 
@s・ の 明る の 時 底 5R29 


* 上 付 文字 に する 


人 


上 付 文才 に する 





「sup0」 メ ソ ッ ド は 、 文 字 列 を 上 付 文字 に し ます 。 
<sup> と 同じ 働き を し ます 。 在 5-mac 


在 -mac 
EE 所 に 


<script ype="Eext/]aVvascript"> 


= = 
ミ N 
に に ゴ > 


OO 

document . write ("上 付 文字 に する " .sup( ) ) : 
が ラー の 

</ SC エ 1p キ > 





下 付 文字 に する 


文字 列 .gub() [メソ ッ ド ] 


生 C-W5amplesWjsW02builtin\08 
アイ ル (D 陽 和 (6D 表示 お 気に入り ⑧ ウー ル GD 2⑪ 


@・ の 回 回 人 の の w 到 5moo 


の < 計 舌 WS 


* 下 付 文字 に する 


下 付 支 隆 に する 





「sub0」 メ ソ ッ ド は 、 文 字 列 を 下 付 文字 に し ます 。 
<sub> と 同じ 働き を し ます 。 


ESEEESESmmm 


<SCr1pt type="Eext/]avasCript "> 

に っ リ ーー 

document . write(" 下 付 文字 に する " . sub( ) ) : 
// ニ ニテ 

</ SCr1ip セ 上 > 








当 
hl hl 
JJ 
に 】 (し 1 に 】 


に こ 】 


7//( 


品 
S 
に] 


トコ 
1 
< 


邦 5-mac 
話 4-ac 


に 3 に トコ 


wwwsw 用 


30 ag オフ ジェ クト 


等 幅 文字 に する 


文字 列 fixed() メソッド] 





ETUUESEHIMYTHIULERHUT2AIHTT は 341 1 当 


プア イル E) 編集 表示 () お 気に入り @) ウール CD ヘルプ ⑪ 


G・ の 回 回 る の me 衣 moo 


+ 等 幅 文字 に する 


等 幅 文 字 に する 





「fixed0」 メ ソ ッ ド は 、 文 字 列 を 等 幅 フ ォ ン ト で 表示 し ます 。 
<tt> と 同じ 働き を し ます 。 


ED 舞 ーー 


<SCr1pt type="text/avaScr1ipt"> 
さっ 

document .write(" 圭 幅 文字 に する " .Eixed( ) ) : 
//= ェ > 

< く / SCr1Dt> 






文字 を 点滅 する 








文字 列 .btink() [メソ ッ ド ] 


アイ ル (E) 直 集 E) 表示 W) 移動 ⑬ ブッ 2 マー の ⑧ ツー ル ① AM2⑪ 圭 


へ 和 を - ゆ 5 ら G@ の owa 


+ 区 字 を 点 波 す る 





「blink0] メ ソ ッ ド は 、 文 字 列 を 点 減 さ せま す 。 
<blink> と 同じ 働き を し ます 。 Netscape7.X、Firefox で は 対応 し て いま す が 、Internet 
Explorer や Netscape 6.X、Safari は 、<blink> に 未 対応 な た め 何 も 反応 し ませ ん 。 


| Sano 王 還 


< く SC エ 1Dt ype="Eex/ avascr1p"> 
小三 

document .write(" 文 字 を 点滅 す る " .b1ink() ) : 
ん 6 こ こみ 

く / SC エ 1p セ > 








文字 列 LHink( 7g ア ) 






EGO 






潮 C:*Samples\js\02builtin\03string\12\jndex_html 


アイル) 編集) 表示 お 気 に 入 D ツール ① ヘル プ ゆ 
G・ の - 加 回 の の 容 5moo 


* リ ンク を 作る 


ン 守 人 







After 


潮 http://www.shuwasyste m_co.jp 


アイ ル ⑥ 編集 (EC) 表示 ) お 気に入り @⑩ 


@② 京 ・⑨ 関 較 の の 到 宮 語 9 





[iink0」 メ ソ ッ ド は 、 リ ンク を 設定 し ます 。 
<a href ="URL'> と 同じ 働き を し ます 。 


ED 所 _ 


<SCript ype="Eext/avaScr1ip 上 "> 


<! ニー 


document .write(" リ ンク を 作る " .1ink( "http: //www.8huwasyStem.Co.Jp/") ) : 


Aa コ 
</ Script> 





回 
語 
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mn 
n 


語 
mn 
ご 】 


語 
ご 


太 /e7ox 
Moz/a 


に 
さ 
>< 


ヒコ 
に 1 
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=|= 
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に に 1 


Opeya7 
Opeya6 


Sa ね a// 


リエ で 
左 4-mac 


ぶ ト 寺 藩 上 当 判 注 








5J 
に 
に ごう 


n 
1 
1 


7e7ox 


_frefox 」 

時 7 が 9 
リル 6 

_A2. | 


Opeya/ 
のり リ コー ルリ 





dt 寺 藻 当 H0 演 作 


332 ag オラ ジェクト 


文字 列 .anchor() [メソッド ] 















ヨ c:*5amplesyiswn2bultn\03strmew13\mdexhtml - Mi 司 | 回 了 


アイ ル 軒 集 6) 表示 め e 
GO の 人 
ォ * ア ンカ ー を 設定 する 
アン カー の 設定 











C-\5amplesYjs\02builtim\03 





trine\13\imdex.html - Mi 


「anchor0」 メ ソ ッ ド は 、 ア ンカ ー の 設定 を し ます 。 
<a name="> と 同じ 働き を し ます 。 


EYE 得 IL_svsnmn5 ユ ラブ ラブ ラブ 0†0 ツ 


<body> 
<p>* アン カー を 設定 する </p> 


< く SCr1p ype="ex 上 /avaScCr1p"> 

に kn 

document .write ("アン カー の 設定 " .anchor ( "test1") ) : 
か ーー の 

< く / SCr1Dp ヒ > 


く Dr><D エ ><D エ ><D エ ><D エ ><b エ ><D エ ><D エ ><D エ ><D エ ><b エ ><D エ ><D エ ><D エ ><b エ ><b エ ><b 
エ >< く D エ ><D エ ><b エ ><D エ ><b エ ><D エ ><D エ ><b エ ><D エ ><D エ ><b エ ><D エ ><b エ ><D エ ><b エ ><b エ > 
く br><Dr><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><b エ ><D エ ><D エ ><D エ ><b エ ><b エ ><D 
エ > く D エ ><D エ ><D エ ><jD エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><b エ ><D エ ><D エ ><D エ ><b エ ><D エ > 
く D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><b エ ><b ェ ><b ェ ><D 
エッ <b エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><b エ ><D エ ><D エ ><D エ ><D エ ><b エ > 
く D エ ><D エ >< わ エ ><D エ ><D エ ><D エ ><D エ ><D エ >< わ エ ><D エ ><D エ ><D エ ><D エ ><D エ ><b エ ><b ェ ><Db 
エッ > く D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ ><D エ >< わ エ ><D エ ><D エ ><D エ ><D エ ><D エ ><b エ >< く Dr> 
< く b エ ><D エ ><D エ ><D エ ><D エ ><b エ > 

<a href="#test1"> アン カー の 設定 へ </a> 

</body> 





SE /E6. 
大 文字 を 小文字 に 変換 する 83 


文字 列 .koLowerCase() [メソ ッ ド ] 









7 コル の 
Moz/a 
リル 


* 大 文字 を 小文字 に 変換 する 


4.0e 


oomoziwokomozinisuru 


に 3 


に コ ー ゴ 品 了 訴 
RSES に 回 団 内 
に 3 こ 】【 に 】 いい 





Opeya7 
Opeya6 


[toLowerCase()」 メ ソ ッ ド は 、 大 文字 の 文字 列 を 小文字 に 変換 し ます 。 Sa ね 
計 5-mac 


EE 提 o 克 4-mac 
<soript ype="text/]aVascr1Dpt "> 

く !ーー 

document . write ( "OOMOZTWOKOMOZTNTSURU" .toLowerCase( ) ) : 

//-ー> 

</ SCr1p セ > 





小文字 を 大 文字 に 変換 する 


文字 列 .koUpperCase( ) [メソ ッ ド ] 





ヨ CY5amplczWjsWD2builtm\03strjngW15Windex.html - Mi 


ファ イル 編集 表 お 気に入り (⑱) ツー ル ⑪ へ ルル 2 


GR・ の 回 還 人 の の 時 宮 20 


の 計 水 SH 


* 小 文字 を 大 文字 に 変換 する 


KOMDZIWOOOMOZINISURU 





[toUpperCase0」 メ ソ ッ ド は 、 小 文字 の 文字 列 を 大 文字 に 変換 し ます 。 


ED 所 es 


<SCr1p ヒ ype=" ex 上 /]aVaSCript"> 

ぐ ! ニ ーー 

document . write ( "komoz1vwooomozinisuru" .EoUpperCase ( ) ) : 
の の ーー 

< く / SCr1D キ > 





ま ) た //』 
圧 5-mac 
圧 4-mac 


謀 
4 
宰 
列 
作 
す 
る 





に たん ルレ ユマ /」k-) 


文字 列 .split( 分 神 す る 文字 列 ) メソッド ] 
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アイ ル (F) 編集 (表示) お 気 に 入 D( ウー ル ① ヘル プ ブ ⑬ 
〇 や ・ の 回 還る の we 支 im 


* 文 字 列 を 分 割 する 


Welcome / To / My / Home / Page / 
MM 





「split0O]」 メ ソ ッ ド は 、 文 字 列 を 指定 し た 文字 の 部 分 で 分 割 し ます 。 

サン プル で は 、「Welcome To My Home Page」 の 各 ス ペー ス ご と に 文字 列 を 分 割 し 、[/| 
を 挿入 し て いま す 。 

また 、 分 割 さ れ た 文字 列 は 0 か ら 始 まる 配列 に な り ま す 。 し た が っ て 、「SPmozi[2]] は 
「My」 を 返し ます 。 

JavaScript1.1 で 追加 され た メソ ッ ド で す 。 


ED 己 


< く SCr1p ype="Eex ヒ 上 /]avascript 上 "> 

で ドニー 

Var mozi="Welcome To My Home Page": 

Var space=" 『": 

Var SPmoz1 = mozi.sp11it( space) : 
for (Var i=0: 1 < SPmozi.1ength: i++) [{ 

document .write (SPmozi[i] + " / "): 

} 

document .write ("<br>" ) : 

document .write (SPmoz1i [2] ) : 

ーー ド 

く / SC エ 1D ヒ > 


Sh amg オ ラジ ェクト 


lk 】 ミ 【 り た た えた 
文 多 charAt( ヵ ) ソ ッ ド 


引 CYSamples\js\D2bujlt in\D3strine\1 7\index.html 
アイ ル (P) 編集 GE) 表示 W) お 気 に 入 DO ウール ① ルプ ⑱⑪ 


GO の 回 回 人 の の ws 支 so 


*m 番 目 の 文字 を 抜き 出す 


T 
ム 


[charA(0]」 メ ソ ッ ド は 、0 ス ター ト の 先頭 か ら 数 えて n 番 目 の 文字 を 抜き 出し ます 。 

サン プル で は 、「Welcome To My Home Page」 の 9 番目 の 文字 で ある 「T] が 抜き 出さ れ ま す 。 
Netscape Navigator の 場合 は 、 JavaScriptl.2 まで は 日 本 語 の よう な 2 バイ ト 文 字 は 1 文 
字 を 2 字 と し て 見 る た め 、 日 本 語 の 文字 列 を 正確 に 抜き 出す こと が で きま せん で し た 。 
し か し 、 JavaScript1.3 か ら は 文字 コー ド が mwicode に な っ た の で 、 日 本 語 も 正確 に 抜き 
出さ きれ ます 。 

な お 、Intemet Explorer は 、 日 本 語 も 半角 英 数 字 も 1 文字 と し て カウ ント し ます 。 


Er 所 ーー 


<SCript type="text/ avaScCr1pt"> 
aa 
Var moz11 = "Welcome To My Home Page": 
var moz12 = "よう こそ 私 の ホー ムペ ー ジ へ ": 
document . write (moz11 .CharAt (8) ) 
document .write( "<br>" ) : 
document . write (moz12 .CharA モ (8) ) : 
5 
</ scr1p セ > 





3 
/ 也 年 】 
/ 也 / 
/ 巴 見 / 


re7ox 
Moz//a 
リル, 


Ope/aZ 
Opera6 


回 回 
< 委 に 


Sa ね // 


圧 5-mac 
放 4-mac 


ぶ 計 圭 藩 上 光導 注 人 















し /E6.0 」 
文字 列 の 達 中 の 文字 を 抜き 出す 
文字 列 .substring( ヵ ,m) [メソ ッ ド ] 
アル 紀 () 表示 お 気 に ADQ) ウ - ル CD ヘルプ ⑪ 
W6.X Os・ の 回 還 人 の の gm 丈 5moo 
ho 
Ope/a/ 和 3 
Opeya6 


ト EJE7】 


「substring0」 メ ソ ッ ド は 、0 ス ター ト の 先頭 か ら 数 えて 、 n 番 目 の 文 字 か ら m 番 目 の 文 
字 の 直前 まで の 文字 列 を 抜き 出し ます 。 

Internet Explorer で は 、 日 本 語 も 半角 英 数 字 も 1 文字 と し て カウ ント し ます 。 Netscape 
Navigator の 場合 は 、JavaScript1.2 まで は 日 本 語 の よう な 2 バイ ト 文 字 は 1 文字 を 2 字 と 
し て カウ ント し て いま し た が 、JavaScript1.3 か ら は 文字 コー ド が Unicode に な っ た の 
で 、 日 本 語 も 1 文字 を 1 字 と し て カウ ント する よう に な っ て いま す 。 


ED 揚 ae 


<8SCr1D ヒ type="tex 上 /avaSCript"> 
く ! ーー 


圧 5-mac 
圧 4-mac 





Var moz11 = "Welcome To My Home Page": 
var mozi2 = "よう こ ぞ 私 の ホー ムペ ー ジ へ ": 
document .write (mozi1 .substring(8,12) ) : 
document . write ( "<Dr>" ) : 
document . write (mozi2.substring(8,12) ) : 
07 ラー 
く / SCr1Dp ヒ > 


1 計 落 Qt 当 内 用 


日 本 語 ( る バイ ト 文 字 ) の 取り 扱い に つい て 

Netscape Navigator で は 、JavaScript 1.2 まで は 文字 を 常に 1 バイ ト 文 字 と 
し て 認識 し て いた の で 、 日 本 語 の ひら が な や 漢字 な どの ら バ イト 文字 は 1 文字 を ら 
字 と 認識 し て いま し た 。 そ れ に 対し て 日 本 語 版 の Internet Explorer は 、1] バイ ト 
文字 も ら バ イト 文字 も 1 文字 は 1 字 と し て 認識 し ます 。 


と の た め 、 日 本 語 に 対し て 「index0f0」 メ ソ ッ ド や 「substring()」 メソッド な ど 
の 文字 を 検索 し た り 抜き 出す スク リプ ト を 使用 し た り 、「length] プロ パテ ィ で 文字 
の 数 を 調べ た りす る と 、Netscape Navigator と Internet Explorer (日 本 語 版 ) で 
は 異な っ た 結果 に な り ま し た 。 

JavaScript1.3 か ら は 、 文 字 コ ー ド が UNICODE に な っ た の で 、Netscape 
Navigator で も 日 本 語 も 1 文字 を ] 字 と し て カウ ント する よう に な り ま し た 。 





06 amg ォ フジ ェクト 





n 番 か ら m 個 の 文字 を 抜き 出す 


文字 列 .substr(n,7m) [メソ ッ ド ] 









E 記 中 PS4SIU2THIIEERMUT24ELTT つ 3111 1| 


アイ ル D 編集 表示 お 気 に AD(⑱ ツー ル CD へ ルプ ⑪ 
@・ の 回国 人 @ の 時 実 sm 


*n 番 か ら m 人 固 の 文字 を 抜き 出す 


ToM 
ムペ ー ジ 





「substr0」 メ ソ ッ ド は 、0 スタ ー ト の 先頭 か ら 数 えて 、 n 番 目 の 文字 か ら m 個 の 文字 を 抜 
き 出 し ます 。 n 番 目 か ら m 番 目 の 文字 を 抜き 出す 、JavaScript1.0 の 「subsring(」 メ ソ ッ 
ド ( 前 項 の 「 文 字 列 の 途中 の 文字 を 抜き 出す 」) と の 違い に 注意 し て くだ さい 。 

Internet Explorer で は 、 日 本 語 も 半角 英 数 字 も 1 文字 と し て カウ ント し ます 。Netscape 
Navigator の 場合 は 、 JavaScript1.2 まで は 日 本 語 の よう な 2 バイ ト 文 字 は 1 文字 を 2 字 と 
し て カウ ント し て いま し た が 、 JavaScript1.3 か ら は 文字 コー ド が Unicode に な っ た の 
で 、 日 本 語 も 1 文字 を 1 字 と し て カウ ント する よう に な っ て いま す 。 

JavaScript1.2 で 追加 され た メソ ッ ド で す 。 


ETTG 間 只 -ーーーーーーーーーーーーーーー 


<Script type="text/]aVascr1p ヒ "> 

く ! -- 

var moz11 = "Welcome To My Home Paqe": 

var moz12 = "よう こそ 私 の ホー ムペ ー ジ へ ": 
document . write (moz11 .subst エ (8,4) ) : 
document .wriEe ("<Dr>" ) : 
document . write (mozi2 .substr(8,4) ) : 

//-ー テ > 

</ BCr1Dpt> 
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Safa// 


圧 5.mac 
リア 


の 某 薄 避 当 居 当 l 
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/E5.0 


re7ox 
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Opera/ 
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Sa ね // 


Opeya6 


圧 5-ac 
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の 圭 藩 当 章 放 用 














先頭 か ら 文 字 列 を 検索 する 


文字 列 LindexOf( 粒 索 対 衣 文 字 列 検 索 剛 始 位 置 ]) [メソ ッ ド ] 
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アイ ル (FE) 編集 (EC 表示 ) お 気に入り D⑱ ツー ル ① へ ルプ ⑪⑬ 
GO の 回 回 の の we mmoo 


* 先 頭 か ら 文字 列 を 検索 する 





「indexOf0] メ ソ ッ ド は 、 文 字 列 を 先頭 か ら 検索 し ます 。 

「 検 索 対 象 文字 ] で 指定 し た 文字 の 位置 を 、0 ス ター ト の 先頭 か ら 数 えた 数 字 で 返し 、 も 
し 指定 し た 文字 が 含ま れ て いな い 場 合 は 「-1」 を 返し ます 。 

Netscape Navigator の 場合 は 、JavaScript1.2 まで は 日 本 語 の よう な 2 バイ トト 文字 は 1 文 
字 を 2 字 と し て カウ ント し て いま し た が 、 JavaScript1.3 か ら は 文字 コー ド が Unicode に 
な っ た の で 、 日 本 語 も 1 文字 を 1 字 と し て カウ ント する よう に な っ て いま す 。 Intermet 
Explorer で は 、 日 本 語 も 半角 英 数 字 も 1 文字 と し て カウ ント し ます 。 

また 、[[ 検 索 開始 位置 ]] は 省略 可能 で 、 そ の 場合 は 先頭 か ら 検索 し ます 。 


Er 揚 is 


<SCript type="Eext/]avascript"> 
ーー 
Var moz11 = "Welcome To My Home Page": 
Var moz12 = "よう こ ぞ 私 の ホー ムペ ー ジ へ ": 
document .write (mozi1 .indexOE ( "m" ) ) : 
document .write ( "<br>" ) : 
document .write (mozi2.1indexOE ("私 ", 0) ) : 
document . write ( "<br>" ) : 
document .write (mozi1 .1ndexOf ("A", 0) ) : 
メー ニテ 
< く / scr1pt> 


59 wm オフ ェクト 


PP 2 ニー hm 


後ろ か ら 文 字 列 を 検索 する 


文字 列 .lastndexOf( 栓 索 旭 文 字 多 [本 義 始 位置]) [メソ ッ ド ] 








当 C-\Samples\js\02builtin\03string\21\index html 


イル 騙 入 6) 表示 Q⑰ お 気 に AO ツー ル Q⑪ へ 
の 回 還 人 の の 実 sm 


* 後 ろか ら 文 字 列 を 検索 する 





IiastimdexOfO0」 メ ソ ッ ド は 、 文 字 列 を 後ろ か ら 検索 し ます 。 

「 検 索 対 象 文字 ] で 指定 し た 文字 の 位置 を 、0 スタ ー ト の 先頭 か ら 数 えた 数 字 で 返し 、 も 
し 指定 し た 文字 が 含ま れ て いな いり 場合 は 「-1] を 返し ます 。 

Netscape Navigator の 場合 、JavaScript1.2 まで は 日 本 語 の よう な 2 バイ ト 文 字 は 1 文字 
を 2 字 と し て カウ ント し て いま し た が 、JavaScript1.3 か ら は 文字 ユー ド が Unicode に 
な っ た の で 、 日 本 語 も 1 文字 を 1 字 と し て カウ ント する よう に な っ て いま す 。 Intemet 
Explorer で は 、 日 本 語 も 半角 英 数 字 も 1 文字 と し て カウ ント し ます 。 

また 、「[ 検 索 開始 位置 ]] は 省略 可能 で 、 そ の 場合 は 1 番 後 ろか ら 検 索 し ます 。 


| Solo 


<SCr1p type="Eext/ avaSscr1p"> 
で ! ュ ニー 
Yar mozi1 = "Welcome To My Home Page": 
Yar moz12 = "よう こそ 私 の ホー ムペ ー ジ へ ": 
document .write (mozi1 .1asTndexOE ( "m" ) ) : 
document .write ( "<Dr>" ) : 
document . write (mozi2.1astTndexOE ("私 ",12) ) : 
document .write( "<br>" ) : 
document .write (moz11.1astTndexOF ("A" ) ) : 
ん ルーー 
</ SCr1p ヒ > 





万 re7ox 
(の 2 た 】 





OpeyaZ 
Opeya6 


Sa ね // 
圧 5-ac 


リア 


主 
文 
享 
R 
す 
る 








E6.0」 
| 指定 し た 文字 の ISO-Latin-1 の コー ド 番 号 を 返す 
文字 列 ,charCodeAt(n) ば ソ ッ ド ] 
当 C-\Samples\js\02builtin\03string\22\index.html - Mi 同 回 四 
アイ ル 編集 表示 お 気 に 和 U ツール ⑪① 人 へ プ (⑪ 尊 
ー 義 の 回 回 人 る の we 宮 5moo 
* 指 定 し た 文字 の ISO-Latin-1 の コー ド 番 号 を 返す 
Opeya/ 8 
Opeya6 


Sa ね 


圧 5-mac 
放 4-mac 





「charCodeAt(O」 メ ソ ッ ド は 、0 ス ター ト の 先頭 か ら 数 えて 、n 番 目 の 文字 を ISO-Latin-1 
の 文字 コー ド に 変換 し ます 。 
JavaScript1.2 で 追加 され た メソ ッ ド で す 。 


陸 ee 


<SCr1p ype="EexEt/]avascr1pt "> 

で! ニー 

documen .write ("ABC" .charCodeAt ( 1 ) ) : 
//-- テ > 

</ SCr1D ヒ > 


4 藻 wt 当 則 当 上 


文字 列 以外 も 検索 ・ 文字 修飾 する に は 

strin ほ オブジェ クト の メソ ッ ド は 、"-" で 括 ら れ た 文字 列 以外 で も 、 オ ブ ジ ェクト 
を 検索 し た り 、 文 字 修飾 の 効果 を 与え る こと が で きま す 。 

た と えば スク リプ ト 内 で 、「navigator.appVersion.charAt(O)」 と 記述 し た 場合 
は 使用 し て いる ブラ ウザ の バー ジョ ン の 1 番 始め の 数 字 を 返し 、「document. 


write(document.lastModified.italics())] と 記述 し た 場合 は ファ イル の 最終 更新 日 
時 が 斜体 文字 で 書き 出さ れ ま す 。 
これ は 、 各 オブ ジェ クト が string の 属性 を 持っ て いる た めで す 。 



















ISO-Latin-1 の コー ド 番号 を 文字 に 変換 する 
Sirmg.fromCharCode( 愛 東 7, 奏 る .…, 要 末 ヵ ) [メソ ッ ド ] 
当 C*Samples\js\02boiltin\03strine\23\imdexhtml - Mi 司 | 上 | 区 
アイ ル (E) 編集 (E) 表示 ) お 気 に 和 AD ウー- ル ①D へ ルプ ⑪ 

っ .X 
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JJSO-Latin-1 の コー ド 番 号 を 文字 に 変換 する 

ABC OperaZ 

Opera6 


Sa ね 
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「fromCharCode()」 メ ソ ッ ド は 、TISO-Latin-1 の コー ド を 文字 に 変換 し ます 。 サ ンプ ル の 
よう に 、 複 数 の コー ド を 「,」 で 区 切っ て 1 度 に 指定 で きま す 。 
JavaScript1.2 で 追加 され た メソ ッ ド で す 。 


ET 所 ae 


<SCript type="Eex 上 /]avaSCr1p ヒ "> 

く ! ーー 

document .write (String .EromCharCode(65, 66,67) ) : 
ん が ー= ま 

</ scr1ipt> 


の 某 藩 褒 当 層 油 人 


ISO-Latin-1 コー ド と ASCII コー ド 

ISO-Latin-1 コー ド は 「0」 か ら 「255」 ま で あり 、 そ の うち 「0」 か ら 「127」 は ASCII 
の コー ド セ ッ ト と 共通 し て いま す 。 

し た が っ て 、「KeyDown]」「KeyPress」「KeyUp」 な どの イベ ント が 発生 し た 時 に 、 
イベ ント が 発生 し た キー の ASOII の 値 を 取得 で きる event オ ブ ジ ェクト の ブ プロパ 
ティ 「which] を 使用 する 場合 は 、「String.fromCharCode(KeyDown.which)」 と 


いう よう に 「fromCharCode()」 と 合わ せ て 使用 する と 、ASCI| コー ド を 英 数 字 に 変 
換 す る こと が で きま す 。 

ASCII コー ド は 、 コ ンピュータ 用 の 英 数 字 コ ー ド 体系 と し て 広く 普及 し て いる コー 
ド 体 系 で 、7bit、128 文 字 が 割り 当て られ て いま す 。 
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アル 間 当 ) 表示 お 所 に AD⑩ ウー ル GD へ JM プ ⑪ 
OR の 回 回 の の 叶 実 sw 
和夫 日 を 表示 する - Aray オ ブ ジ ェクト を 使う - 


(月 ) 







CysamplesYjeyD2bontmYp4arrayYp1Ymdexhtml - Mi 司 | 了 | 
アイ ル D 電 委 GO) 表示 お 気 に A⑯ ウ -MD AM プ ⑬ 圭 


GR・ の 回 還る の ws 云 imo9 


* 失 日 を 表示 する - Array オ プ ジ ェクト を 使う - 







( 火 ) 
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ァイル) 引 華 ) 表示 お 気に入り @⑯ ウー ル D へ ルプ 
の - 還 回 の の w 支 imoo 
4 日 を 表示 する - Array オブ ジェ クト を 使う - 


( 水 ) 














4arrayYD1\mdexhtml - Mi 司 


アイ ル ⑤) 組 業 (D) 表示 ⑰ お 気に入り @⑯) ツー ル D へ ル 2⑪ 


@・ の 回 @ の wt 支 5m29 








アイ ル (P 正 策 表示 お 気に入り 0⑯ ツー ル ①D ルル 0⑪ 


@ の 回 回 人 る の Ws 誠 mo 





ファ イル (PD 繊 業 ) 表示 ⑯ お 気 に 入 0⑱) ツー ル ①D へ ルプ ブ ⑪ 
OR の 回 回 の の mw 衣 eoo 
旨 夫 日 を 表示 する - Array オ ブ ジ ェクト を 使う - 
( 土 ) 


DcyiAN IE 


する 」(P.502) を 、Array オブ ジェ クト を 使っ て 書き 直し た も の で す 。 


サン プル で は 、「Date オブジェクト] で 説明 し た 曜日 を 表示 する スク リプ ト 「 曜 日 を 表示 


「youbi= new Aray(7)」 で 日 曜日 か ら 土 曜日 まで の 7 つの 配列 要素 を 持っ た 「youbi] と い 





う オ プ ジ ェ クト を 作成 し て 、「getDay)] で 取得 し た 値 と 照合 し 、 値 が 「0」 の 8 
で ある 「 日 | を 、 値 が [1」 の 時 は 「youbi[l]] で ある 「 月 |] を … と いっ た 具合 に 
ら 文字 列 を 取り 出し て いま す 。 

Array オプ ジェ クト は JavaScript1.1 で 追加 され た オプ ジェ クト で す が 、 こ 
Netscape Navigator 2.X で も 使用 で きま す 。 


Yo rm オダ ェクト 


詩 は 「youbi[0]」 
配列 の 要素 か 


の サン プル は 














EE 坦 N ト u ト トト QpQ レ に ト に p レ レバ ヤレ トリ lb|l| ら クーl( ゅ も ー る も 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> り 全 た ) 
<htm] ><head> リ / 也 朋 / 
<meta htp-equiv="Conten 上 -Script-"Type" conEtent="text/]avascr1p"> リリ 


<meta htEp-equ1 マ ="ConEen-Sty1e-Type" content="text/css"> Prafox 


< 上 it 上 1e></ 上 11e> 


< く Script ype=" ex 上 / avaScript"> oz 
6 
Youbi = new Array(7) : 6.X 


youbi[0] = "日 ", 4.06 
youbi [1] = "月 ": A4.X 





















youbi [2] = "人 : OperaZ7 
youbi [3] = " 水 ": Po 
youbi [4] = " 木 ": Ne 
youbi [5] = " 金 ": Sa な ね // 
youbi [6] = " 土 ": 彗 5 
function gety (y) { document .write( youbi [y] ) } 放 2. 
//--> 

< く / SCr1p キ > 

中略 

<body> 

* 曜日 を 表示 する - Array オ プ ジ ェ クト を 使う - 

<D> 


( 
<scrip 1anguage= "JavaScript"> 
く ! ーー 


day = new Date() : 
gety (day .getDay ( ) ) : 
0/ ら = 

< く / script> 

) 

く /p> 
</body></htm1> 








Netscape Navigator 2.0 で も 使え る Array オブ ジェ クト は ? 
Array オ ブ ジ ェクト は 、Netscape Navigator 3.0 で 対応 し た JavaScript1.1 
か ら 追 加 れ た オブ ジェ クト で す が 、「array オブ ジェ クト 名 = new Array( 配 列 の 
数 )] の 用 法 だ け は 、Netscape Navigator 2.0 で も 使用 可能 で す 。 
し か し 、 そ れ 以 外 の 「array オ ブ ジ ェクト 名 = new Array(O 番目 の 要素 .…n 番 目 
の 要素 )] で 作成 され た 配列 の オブ ジェ クト や 、「join0」「reverse0」「sort0」 な どの 
メソ ッ ド は 使用 で きま せん 。 








還 
トー】 


frefox 


妃 re7ox 


リル 
_4e」 


Opera/ 
Ope/a6 





2AU 当 可 用 


の 中 革 藩 球 テ ロペ 


Se Am オォ フタ ェクト 


配列 の 要素 を 文字 列 に し て 書き 出す 


ar7a ア ガブ ジェ クト 名 = new Array(0 番 日 の 要素 ,】 背 の 妥 素 , .… 
p 匠 月 の 要素 ) 
オブ ジェ クト 名 .join() [メソ ッ ド ] 


| 陣 層 


の 回 還 人 の の ww 克 zmoo 


相 C2 の 要素 を 文字 列 に し て 書き 出す 


0 番目 /1 番 目 /2 番 目 /3 番 目 





「join)」 メ ソ ッ ド は 、 配 列 の 要素 を 文字 列 に 変換 し ます 。 

「join(" 文字 列 )」] と 指定 する と 、 要 素 の 区 切り 時 に カッ コ 内 の 文字 列 が 加え られ ます 。 
何 も 指 定 が な い 時 に は 、 各 要素 は 「.] で 区 切ら れ ま す 。 

「joim0」 メ ソ ッ ド は 、Netscape Navigator 2.X で は 使用 で きま せん 。 


| Sop 王 還 還 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona] / /EN"> 
<htm1> 
<head> 
<meta http-equiv="Content-Script-Type" content="text/]avaScr1Dt"> 
<meta http-equiv="ConEent-Sty1e-Type" content="Eex 上 /CS8"> 
< 上 1 上 1e></ 上 1 上 ]e> 
て 中略 一 
</head> 
<body> 
* 配列 の 要素 を 文字 列 に し て 書き 出す 
ぐ D> 
<script type=" ext/]avaSCr1Dpt"> 
マー 
hairetu= new Array("0 番 目 ","1 番 目 ", "2 番目 ", "3 番目 " ) : 
document .write(hairetu.]oin("/") ) : 
7 ニー ニテ 
</ SCr1Dpt> 
く /p> 
</body> 
</htm1> 





/ ゴ 2/ 


LEe.0 _ 

配列 の 要素 を 逆 に 並べ 替え る 
ar7a ブ ブ ジ ェクト た 名 = mew Array(0 番 月 の 要素 , 秋月 の 要 礎 , .…, 
秋月 の 記 素 ) 
ガブ ジ ェクト 名 .reverse() [メソ ッ ド ] 


に 
に 
< 


当 C-\Samples\js\02builtin\D4array\D3\index.html 


アイ ル ⑥ 編集) 表示 お 気 に AO ツー ル GD へ M プ ⑪ 
⑨ 記 の 回 還る の 宮 smp 


Ope/a/ 
本 C 列 の 要素 を 逆 に 並べ 替え る 


LM406 


Sa ね 7 


Opeya6 


3 番目 2 番目 1 番目 .0 番 上 


圧 5-mac 
左 4-mac 





Ireverse0」 メ ソ ッ ド は 、 配 列 の 要素 を 逆 に 並べ 替え ます 。 
|reverse0」 メ ソ ッ ド は 、Netscape Navigator 2.X で は 使用 で きま せん 。 


| Sol 生還 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1 > 
<head> 
<meta hEEp-equ1v="ConEtent-Script-Type" content="text/]avascr1ipt"> 
<meta htEp-equiv="ConEenE-Sty1e-Type" content="text/css"> 
<tit]e></tit1e> 
て 中 略 - て 
</head> 
<body> 
* 配列 の 要素 を 逆 に 並べ 替え る 
< く D> 
<script type="text/]avascr1pt"> 
に 
hairetu= new Array("0 番 目 ", "1 番目", "2 番目 ", "3 番目" ) : 
document . write (hairetu .reverge( ) ) : 
ん コテ 
< く / SCr1D セ > 
く /p> 
</body> 
</htm1> 


ーー 


NE 3 


/ 
* 


ピン 

エ 
ク 

ト 
を 
操 
作 
す 
る 





配列 の 要素 を ソー ト す る 
arra ア オブ ジェ クト 名 = new Array(0 秋 昌 の 要素 番 昌 の 要素 ,……。 
番 晶 の 愛 素 ) 
_ ん oz/a | ガブ ジェ クト 名 .sort( 比 裁 硫 数 ) [メソ ッ ド ] 
等 C-\Samples\js\D2builtin\04array\D4\index.html 
アイ ル (上 ) 編集 (E) 表示 お 気 に 和 AD⑱ ウー ル D へ JM プ ⑪ 

ーー 〇 呈 ・ の 回 回 る の me 衣 pmoo 
柄 p 列 の 要素 を ソー ト す る 


Sa ね / 


辞書 順 :array.form,locationwindow 
リ そ が 


/E4-mac 昇順 :832.62.256 





降順 :256.62328 





「sort0] メ ソ ッ ド は 、 配 列 の 要素 を ソー ト し ます 。 

比較 関数 が 与え を られ て いな い 時 は 、 各 配列 の 要素 が 文字 列 と し て 扱わ れ 、 辞 書 編集 法 
に 従っ て ソー ト さ れ ま す 。 

また 、 数 値 を 比較 する 時 は 、 比 較 関 数 を 「function 関数 名 (a, b){ return a - b 」] と する と 
昇順 ソー ト に 、「function 関数 名 (ab){ retum b - a |] と する と 降順 ソー ト に な り ま す 。 
「sort(0」 メ ソ ッ ド は 、Netscape Navigator 2.X で は 使用 で きま せん 。 


| Samnl 環 還 還 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm]><head> 

<meta http-equ1v="Content-Soript-Type" Content="text/]avascr1pt"> 
<meta http-equiv="ConEent-Style-Type" content="text/Css"> 

< 上 1it 上 1e></ キ 上 1 上 ]e> 


きせ 当 本 人 


/ 
内 


<Sty1e tyDpe="text/CsS"> 
ーー 
body { background-Co]or: #EEFFfFF: } 


ーー テ > 


村落 テ マロ 


</ sty1e> 

</head> 

<body> 

* 配列 の 要素 を ソー ト す る 


く Dp> 


3C6 Amy オプ ェクト 



































<SCr1pt type="Eext/avaSCr1p 上 "> /E6.0 
リネ 生 】 


/E5.0 
リズ 


トコ 

Nhairetu1= new Array("1ooaion","a エ エ aY" "Window" "Eorm" ) : 
document .write ("辞書 順 :" ,Nhairetu1 . sort( ) ) : 

// ニ ー> 

< く / SC エ 1D キ > 太 re7ox 
< く /p> り 


<D> 
<8SCr1p ype="Eext/]avaScrip 上 "> 

を am 

Nhairetu2= new Array(62,8,256,32) : ・ 
function SorESet(a,D) { return a-b)} OperaZ 
document .write( "昇順 :" ,Nhairetu2 . sort (SortSet) ) : 0pe7a6 


人 な ニョ 

< く / SC エ 1Dt> Sa7g/ 

く /p> 圧 5-a 
話 4-ma, 

く D> 


<SCr1pt type="Eex/]avasCrip 上 "> 

に Hi 

Nhairetu2= new Array(62,8,256,32): 

function SortSet (a,D) { return b - a } 

document .write( "降順:" ,Nhairetu2 . sort (SortSet) ) : 
ん / ら = 

</ SCr1pt> 

く /p> 


</Dbody> 
</htm1> 






「Sort()」 メ ソ ッ ド を 使用 する 時 の 注意 
「Sort0」 メ ソ ッ ド を 使っ て 配列 を ソー ト し た 結果 を 、 連 続 し て 「document.write」 
で 書き 出 そ う と する と 、 一 部 ある い は 全部 が 表示 され な い 場 合 が あり ます 。 

これ は 、 配 列 を 評価 し て ソー ト す る の に 時 間 が か か り 、 結 果 を 返す より 前 に ペー 
ジ の ロー ド が 終っ て し まう た め だ と 思わ れ ま す 。 

マシ ン パ ワー に も 左右 され る よう な の で 、「Sort(0」 メ ソ ッ ド を 使う 時 に は 、 色 々 
な 環境 で チェ ッ ク す る こと を お 勧め し ます 。 
この 問題 は 、Netscape Navigator 4.0 で は 解消 され て いま す 。 












の い t 圭 藩 テ マロ INS 癌 源 上 


06 fmemen オ フジ ェクト 





新しい 関数 を 作る 


ガブ ブ ジ ェクト 名 = new Function ([ 愛 素 了 , 要 東 る ,.…, 要 東 ], 
7rznc 刀 on の 師 き ) 

ガブ ジェ クト 名 .length [プロ パテ ィ ] 
ガブ ジェ クト 名 .arity [プロ パテ ィ ] 


ICO(d き ゆり 【 り (っ ま いり 191<d( い る 
等 C-\5ample s\jm\ 


イル) 編集 表示 移動 ⑮⑪ ブッ 2 


[: ゆ : き の の omiig 


寺 し いい 開 数 を 作る "新しい 数 も 作る 
16*32 = 512 


16*32 = 512 jengthz2 


length:2 arityi2 
arity: undefined 


サン プル で は 、new 演算 子 を 使っ て 「x」 と 「y」 の ふた つの 要素 を 乗算 する 関数 [myFunc] 
を 作り 、 そ こ に 数 値 を 入れ て 計算 し て いま す 。 

また 、「lengthl プ ロ パ ティ と 「ariyy」 プ ロ パ ティ は 、 要 素数 を 値 に 持っ て いま す 。 
JavaScriptl.1 で 追加 され た オプ ジェ クト で す が 、「length]l プ ロ パ ティ は JavaScriptl.1、 
「ariy」 プ ロ パ ティ は JavaScript1.2 で 追加 され まし た 。 

Netscape 系 の プラ ウザ 以外 で は 、「ariy」 プ ロ パ ティ は 機能 し ませ ん 。 


|Somnlc 王 還 


<D> 
<SCr1pt type="tex 上 /]javaSscript"> 


リー 
myFunC = new Punction ("rr。 "yr。 "return XX ま Y"): 
document .write("16*32 = " + myFunc(16,32) ) : 


document .write ("<br>" ) : 

document .write("1ength:" + myFunc.1engt ぉ ) : 
//=ー テ 

< く / SC エ 1D セ > 

<SCript type="text/]avaScCript 上 "> 

人 没 こ 

document .write( "<Dbr>" ) : 
document .write ("ariEy:" 二 myFunc。a ミ て 上) : 
ル ん / こ ピン と 

</ scrip キ > 

く /p> 












オブ ジェ クト 名 .caller 





191 つ (いる 





Mozilla Firefox き 


ファ イル (F) 編集 表示 ⑰ 移動 ⑬ 。 プッ マー クウ @) ウー ル ①D へ 2⑪ な 
年 - ゆ - 展 人 @omm 加 
( 数 が どこ か ら 呼 ば れ た か を 参照 する 


この 文字 の 上 に マウ スカ ー ソ ル を 持っ て き て くだ さ v 














Firefox 1.0 








権 集 ) 表示 y 移動 ⑪ プッ 2 マー ク GB) ウール D へ ルプ ⑪ 
を ゆ ゅ -@G の om ] 
* 閲 数 が どこ か ら 呼ば れ た か を 参照 する 

0 を 持っ て き て くだ さ v 





て の ファ ンク ショ は 
Tcton onmouseoverevenb ( 
myfun0. 



















Internet Explorer 6.0 


当 C Y5omplesYjsY02h 
イル (F) 統 案 上) 表示 ウー ル ① へ ルプ 0⑪ 


GO の 還 還 人 の の ge 害 m 
* 関 陰 が どこ か ら 呼 ば れ た か を 参照 する 


この 文字 の 上 に マウ スカ ー ソ ル を 持っ て き て くだ さい 













ueO 








「callerl プ ロ パ ティ は 、 ど の 関数 が どこ か ら 呼 ば れ た か を 取得 し ます 。 


サン プル で は 、 フ ォ ー ム の ボタ ン を クリ ッ ク し た り 、 リ ンク の 上 に マウ スカ ー ソ ル が 
乗っ た 時 な ど に 発生 し た 関数 名 と 共に 、 関 数 を 発生 させ た イベ ント の タイ プ を 表示 し 
た 警告 用 の ダイ アロ グ ボ ックス を 開き ます 。 た だ し 、Windows 版 の mternetExplorer で 


は 、 イ ベン ト タ イ プ が [anonymous()」 と な っ て し まい ます 。 


同様 の 働き を する プロ パテ ィ に 、 オ プ ブ ジ ェクト の 作成 元 、 つ まり 関数 名 を 取得 する 


「constructor]l プ ロ パ ティ が あり ます 。 
JavaScript1.1 で 追加 され た オプ ジェ クト で す 。 





関数 が どこ か ら 呼 ば れ た か を 参照 する 


[プロ パテ ィ ] 






















の アン yootin wonymous0 


に 


Tncton オ プ ジ ェクト 569 


回 ヨ 3 ヨ 
さ 軌 記 記 


に 
品 
に 
に 3 


ヒコ に ゴ に コ 1 
さき に 1 に 1 
に 3 に 3 トコ 


Moz/a 


Ope/a/ 
Ope/ra6 


夏 5-ac 
リア 4 


関 
由 
4 
ン 
EE 
の / 
ト 
を 
操 
作 
す 
る 








リ そ 上 / 

































7e7ox 
MMoz 放 
。 AZ.X 
。A6.X 
ん 移り 
_A4X 


ET 電 LOuOuR5TT エ KKYyvh む キャ w%w キ き ォ ペ “W”W ヽ ゝ 』 ユ ヨ ユ ゞ ゅ ゴ ベ ゾ げ ベ ヅ W@《† ざ コ 《 く ゴ 【 ド 00 


<!DOCTYPE HTML, PUBLTC "-//W3C/ /DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta htEp-equ1V="ConEent-Script-Type" content=" て ex 上 /]avascr1ipt"> 
<meta hEtp-equ1v="Content-SEy1e-Type" content="text/cCss"> 

< 上 1 上 1e></ 上 1]e> 


<8Cript type=" tex/ avascr1pt"> 
ぐり ニー 
Function myFunc() { 
1f (myFunc.ca11er == nu]1) { 
alert ("この ファ ンク ショ ン は フォ ー ム の Top か ら 呼 ば れ ま し た ") : 
} 
else { al1ert(" こ の ファ ンク ショ ン は " + mwyFunc.ca11er + "か ら 呼ば れ ま し た ") : 
} 
が テー 
< く / Cr1D キ > 


<style type="Eex/css"> 

ぶり ニニ 

body { background-co]1or: #FFFFFF: } 
ーー テ > 

</ sty1e> 


</head> 

<body> 

* 関数 が どこ か ら 呼 ば れ た か を 参照 する 

<Dp> 

<fForm> 

<input ype="buEton" value=" クリ ッ ク し て くだ さい " onc1ick="myFunc ( ) "> 
</ Eorm> 

く /p> 

<P> 

<a href="PT.htm1" onMouseOver= "myFunc ( ) "> この 文字 の 上 に マウ スカ ー ソ ル を 
持っ て き て くだ さい </a> 骨 
く /p> 

</body> 

</htm1> 





ガブ ジェ クト (ファ ンク ショ ン ) 名 .arguments.length [プロ バ パティ] 
ガブ ブ ジ ェクト (ファ ンク ショ ン ) 名 .arguments.callee [プロ バ パティ] 
ガブ ジェ クト (ファ ンク ショ ン ) 名 .arguments[ インデ ックス ] 








全 C-*Samples\js\02builtm\05function\03\indexh 


アイ ル (FE) 編集 表示 ) お 気に入り @ 
G ま ・ の 還 還 の の 野宮 sm 
関数 の 内 容 を 配列 に し て 使用 する 


・One 

・Tvo 

・Three 

閲 数 の 内 容 :function lstO [for var に 0 + lstarguments 
届 :)documentwrieC・ 


ト E) リ / 
圧 5-mac 
左 4-mac 


つう: document write( 関数 の 内 容 : ~ + lstarguments callee 1 





「arguments」 は 、 そ れ 自 体 が 関数 の 配列 を 作成 する オプ ジェ クト で 、「length] プ ロ パ ティ 
を 持っ て いま す 。 JavaScript1.0 に 対応 し て いる Netscape Navigator 2.0 か ら 使用 可能 で 


し た が 、JavaScriptl.1 


に 対応 し た Netscape Navigator 3.0 か ら は 、function オブ ジェ クト 


の プロ パテ ィ に 加え られ まし た 。 
サン プル で は 、「jisLarguments.length」 で 関数 [iist)」 の 要素 数 を 取得 し 、for 文 を 使っ て 
[istLarguments[0]」 の 要素 か ら 順 番 に 書き 出し て いま す 。 ま た 、「callee」 プ ロ パ ティ は 、 
関数 の 内 容 を 値 に 持っ て いま す 。 
JavaScript1.1 で 追加 きれ た オプ ジェ クト で す が 、「length] プ ロ パ ティ は JavaScript1.1、 


「callee」 プ ロ パ ティ は JavaScript1.2 で 追加 され まし た 。 


ーーーーーー 


<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 


<html> 
<head> 


<meta http-equ1v="Content-Script-Type" conEent="tex 上 /]avaSscript"> 
<meta http-equ1v="Content-Sty1e-Type" conEent="text/css"> 


<t1 上 1e></ 上 1 上 1e> 


<Script type="text/]aVvascr1p"> 


く ! ーー 
function 1ist() { 
for (Var 1=0: 


四 
オ 
に ) 
ン 
ド 
ト 
を 
操 
作 
す 
る 


ュ <1i st .arguments .1ength: 1 ユ ++) { 


document . write ( "<11>" + 11gt 。arguments [1] ) : 


} 


document .write( "<Dr>" ) : 
document .write( "関数 の 内 容 :" + 11st.argumens .Ca11ee) : 


} 
7 ご 
</ SCr1pt> 
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< く 8 七 
くま ー 
bod 
ーー テ 
</8 
</h 
<bo 


yle type="text/css"> 


ly { background-co1or : #FfFFFFF: } 


ty1e> 
ead> 
dy> 


* 関数 の 内 容 を 配列 と し て 使用 する 


<D> 
<8C 
く !- 
1is 
ん な / テ 
</s 
</p 
</b 
</h 


ェ 1p type="Eext / avaSCr1pt"> 
上 ("One" , "Two" , "Three" ) 

ー テ > 

Cript> 

> 

Oody> 

tml> 


ポッ プア ッ プ ブロ ッ ク に 関す る 注意 

JavaScript で ポッ プア ッ プ ブロ ッ ク に 引っ 掛か る の は 、「window.open()」 メ 
ソ ッ ド を 使っ て 自動 的 に 新しい ウィ ンド ウ を 開い た 時 で す 。 

た と えば 、 本 書 の 場合 、「 ペ ー ジ を 抜け る 時 に 新しい ウィ ンド ウ を 開く 」(P.34 ら ) 
や 「 リ ンク の 上 に ポイ ンタ が 乗る と ウィ ンド ウ を 開く 」(P.419) を 実行 し た 場合 は 、 
ポッ プア ッ プ ブロ ッ ク に 引っ 掛か り ま す 。 た だ し 、「window.open()」 メ ソ ッ ド を 
使っ た と し て も 、「 新 し い ウ ィ ン ド ウ を 開く 」(P.338) の よう に 、 ボ タン の クリ ッ ク 
な どの ユー ザ の 操作 に よっ て ウィ ンド ウ を 開い た 場合 に は 、 ポ ッ プ アッ プ ブロ ッ ク 
に は 引っ 掛か り ま せん 。 ま た 、「window.alert()」「confirm()」「prompt0」 の 各 メ 
ソ ッ ド は 、 ポ ッ プ アッ プ ブロ ッ ク の 対象 に は な り ま せん 。 

以上 の こと か ら 、 イ ベン ト ハ ンド ラ 「onLoad」 や 「onUnload」「onMouseOver] 
な ど を 使っ て 「window.open()」 メ ソ ッ ド を 呼び 出す よう な 時 は 、 ポ ッ プ アッ プ ブ 
ロッ ク に 引っ 掛か っ て し まう た め 、 サ イト を 構築 する 場合 に は 注意 が 必要 で す 。 

ポッ プア ッ プ ブロ ッ ク も 含め て 、Windows XP Service Pack ら を あて た 後 の 
Internet Explorer 6 を 対象 に し た サイ ト を 構築 する 上 で の 注意 点 に つい て は 
「Windows XP Service Pack 2 へ の 対応 に 向け た Web サイ ト の 最適 化 ] を 、 ポ ッ 
プア ッ プ ブロ ッ ク に つい て は 「Windows XP SP ら の 新 機能 、 ポ ッ プ アッ プ ブロ ッ 
ク の 概要 」 を 参考 に ける と よい で し ょ う 。 


「Windowss XP Service Pack 2 へ の 対応 に 向け た Web サイ ト の 最適 化 」 


(http : / /www .microsoft . com/japan/msdn/windows /windowsxp/xpsp2web. asp) 


「Windows XP SP ら の 新 機能 、 ポ ッ プ アッ プ ブロ ッ ク の 概要 」 


(http : / / support .microsoEt . com/kb/883735/JA/) 
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JavaScript 


異な る オブ ジェ クト を 呼び 出す 
cal(this, 9 数 , 紀 数 ,…) メソ ッ ド ] 














ファ イル 妨 集 表示 お 気 に 和 D(⑱ ツー ル Q① へ ルプ ⑪ 
GO の 較 国 人 の の 時 害 5R 


* 異 な る オブ ジェ クト を 呼び 出す 






区 


「calI0] メ ソ ッ ド は 、 引 数 を 指定 し て 、 異 な る オプ ジェ クト を 呼び 出し ます 。 

サン プル で は 、「x」 と 「y」 の ふた つの 要素 を 乗算 する 関数 で ある オプ ジェ クト 「myFunc」 を 、 
関数 [myFunc20)」 か ら 「calO] メ ソ ッ ド を 使っ て 呼び 出し て いま す 。 

この 他 に も 、 引 数 の 配列 と 共に オプ ジェ クト を 呼び 出す 「apply0」 メ ソ ッ ド が あり 、 両 
方 と も JavaScript1.3 で 追加 され た メソ ッ ド で す 。 

この メソ ッ ド は 、Imternet Explorer 5.0 で は サポ ー ト され て いま せん が 、Internet Explorer 
5.5 と 6.0 で は サポ ー ト され て いま す 。 


EEC 揚 = 


<SCript type="Eext/avaSCr1pt"> 

ニニ 

myFunc = new Function("x"。 "y"。 "return XX * YY"): 
function myFunc2(a,b) { window.alert( myFunc .ca11 (this, a, D) ) 
} 

//-ー テ 

< く / SCr1D セ > 

<Dody> 

* 異な る オプ ジェ クト を 呼び 出す 

く D> 

<SCript type= "ext 上 /]avaScr1D 上 "> 

ぐー ニー 

myFunc2 (2,3) 

が が ーー 

</ SCr1p セ > 

く /p> 

</body> 
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アイ ル (E) 編集 GE) 表示) お 気に入り D⑱ ツー ル ① ヘル プ ⑪ 
G*・ の 回 回 @ の me 安 mmoo 


* 新 し い オ プ ジ ェ クト を 作る - 1 - 


新しい オブ ジェ クト で す 


Sa ね 
圧 5-mac 
リプ 





JavaScript で は 、 新 た に ユー ザー 独自 の オプ ジェ クト を 作成 する こと が で きま す 。 

サン プル で は 、「new」 演 算 子 を 使っ て 、「 新 し い オ プ ジ ェ クト で す 」 と いう 文字 列 の 値 を 
持っ た 新た な オプ ジェ クト 、「myObj」 を 作成 し て いま す 。 

JavaScript1.0 か ら の オプ ジェ クト で す が 、Netscape Navigator 2.0 で は うま く 機 能 し な い 
場合 が あり ます 。 


ET7 揚 ーー 


< く !DOCTYPE HTMTL, PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1><head> 

<meta htp-equ1 マ ="ConEent-Soript-Type" Conten ヒ ="Eex/]avascr1pt"> 
<meta htp-equ1Y="ConEent-Sty1e-Type" content="tex 上 /css"> 


く SCr1p type="ex 上 /]avaSCr1D 上 "> 
で ! ニー 


三 三 < 上 1 上 ]e></ 上 1 上 1e> 
<Sty1e ype="text/css"> 
数 0 っ 
3 ody ( background-co1or: #FFEFFF: } 
ミ > ae 
ka </ sty1e> 
ク </head> 
ト <body> 
* 新 し い オ プ ジ ェクト を 作る - 1 - 
作 く D> 
す 
る 


myOb] = new Objeot ("新しい オブ ジェ クト で す " ) : 
document .write (myOb] .bo1d ( ) ) : 

7/ ニ ニテ 

く / SC エ 1p キ > 

く /p> 

</ body></htm1> 


74 0eg オ プア ジェクト 





1 の 人 アル ン オシ スル ュ リ エール を 


オブ ジェ クト 名 = {プロ パテ ィ エ : 値 。 ブ プロパティ る : 値 る …, プロ パテ ィ n: 値 ] 
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プア イル (P) 編集 (EC) 表示 W) お 気 に 和 D⑯) ウー ル ① ヘル プ ⑬ 
OR・ の 回 回 人 の の ws 家 5moo 


* 新 し い オ ブ ジェ クト を 作る - 2 - 


新しい オブ ジェ クト で す 





JavaScript1.2 か ら は 、 あ ら か じ め 用 意 き れ て いる オブ ジェ クト を 使用 する か 、new 演算 
子 を 使用 し て 新しい オブ ジェ クト を 作成 する 以外 に も 、 サ ンプ ル の 用 法 で も 独自 の オ 
ブ ジ ェクト を 作成 で きる よう に な り ま し た 。 

サン プル で は 、 文 字 の 色 や サイ ズ の 値 を プロ パテ ィ に 持っ た 「mystring] と いう オプ ジェ 
クト を 作成 し て いま す 。 


| 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1l> 
<head> 
<meta http-equ1v="Conten-Script-Type" Content="tex 上 /]avaScr1D"> 
<meta http-equiv="Content-Sty]e-Type" conEten="text/css"> 
< 上 it]e></ 上 11e> 
中略 
</head> 
<body> 
* 新しい オブ ジェ クト を 作る - 2 - 
< く D> 
<SCrip type= "ex 上 /]avaSCr1Dpt "> 
ぐ ! ニー 
myOb] = new Object ("新しい オブ ジェ クト で す ") : 
mystring = ( col1or:"red",s1izes5 } 
document . write (myOb] . Fontco1or (mystring .co1or) .Fontsize (mystr1ng.S1Z 
@) ) : 
// ニ コン 
</ Script> 
< く /p> 
</body> 
</htm1> 
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mm 
プロ パテ ィ を 監視 する 


Watch( プ ロバ パティ, 対数 ) [メソ ッ ド ] 
unwatch( プロ パテ ィ ) [メソ ッ ド ] 





















Mozjlla Firefox 
02823 


旬 ・ 吾 ・ 良和 ぬ の 9 到 選 


ォ プ ロッ < ティ を 監 杭 す る 




















「watch0]」 メ ソ ッ ド は 、 プ ロ パ ティ の 監視 を 行う メソ ッ ド で す 。 

サン プル で は 、 新 た に 作成 し た 「myobj]l オ プ ジ ェ クト の 「pro」 プ ロ パ ティ を [watch()」 メ 
ソ ッ ド で 監視 し て いま す 。「prol」 プ ロ パ ティ に は 、 始 め 「1」 の 値 が 設定 され て いま す が 、 

「watch0] メ ソ ッ ド 内 で 呼び 出す 関数 の 処理 で 「1] か ら 「2」 へ 、「2] か ら 「 変 わっ た よ !」 と 
いう 文字 列 へ と 変更 きれ て いき ます 。 ち な み に 、 こ の 時 の 関数 の 引数 は 、「function ( プ 
ロ パ ティ . 変 更 前 の 値 . 変 更 後 の 値 )]」 と な り ま す 。 

「unwatch0」 メ ソ ッ ド は 、「watchO」 メ ソ ッ ド で 設定 し た プロ パテ ィ を 監視 を 解除 する メ 
ソ ッ ド で す 。 こ の た め 、「myobj.unwatch(pro)」 の 後に 設定 し た 「myobj.pro = 100」 の 処 
理 は 行わ れ ま せん 。 

JavaScript1.3 で 追加 され た メソ ッ ド で す が 、Intemet Explorer S.X と 6.X で は サポ ー ト さ 
れ て いな いよ う で す 。 


ED 揚 


く SCr1pt type="text/avaSsCr1p 上 "> 
に イド ニー ロコ 
myob] = {pro:1} 
myob] .watoh ("pro", 
Eunotion (1d,o1dva1 , newva1) { 
window.a1ert ( "myob]." + 1d + "を + o1qdva1l + " か ら " + new 
va1 + "人 へ 変更 し まし た ") 凡 
reurn newVva] : 
} ) 
myob] .Dro = 2: 
myob] .pro = "変わ っ た よ !!": 
myoD] .unwatoh ("pro"' ) : 
myob] .pro = 100: 
//-ー テ > 


< く / SCr1pt> 
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真 (true) が か 偽 (false) の 値 を 設定 する 


オブ ジェ クト 名 = new Boolean( ) 
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Boolean オプ ジェ クト を 使う と 、 明 示 的 に 「true」 と 「false」 の 値 を 持っ た オプ ジェ クト を 
作成 する こと が で きま す 。 

サン プル で は 、Boolean オプ ジェ クト を 使っ て 「rue」 の 値 を 持っ た 「myTrue」 オ プ ジ ェ ク 
ト と 、「false」 の 値 を 持っ た 「myFalse」l オ プ ジ ェ クト を 作成 し て いま す 。 

JavaScriptl.1 で 追加 され た オプ ジェ クト で す 。 


計 


<Script type="Eext/]avaScr1pt"> 
デー 

myTrue = nevw Boo1ean (true) : 
myFalse = nevw Boo1ean (Fa1gse) : 


document .write( myTrue == true ): 
document .write( "<br>" ) : 

document .write( myTrue == false ): 
document .write( "<br>" ) : 

document .write( myFalse != true ): 
documert .write( "<br>" ) : 

document .write( myFalse != false ): 
ん / ご = 

</ SCr1D キ > 
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ee 
数 値 を 作成 する 


ガブ ジェ クト 名 = new Yumber( ) 


ガブ ブ ジェ クト 名 .YaT [プロ パテ ィ ] 
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Number オプ ジェ クト を 使う と 、 数 値 の 値 を 持っ た オブ ジェ クト を 作成 する こと が で き 
ます 。 

サン プル で は 、Number オ プ ジ ェ クト を 使っ て 、 数 値 の 値 を 持っ た オプ ジェ クト 
「myNumber」 を 作成 し て いま す 。 ま た 、「NaN]」 プ ロ パ ティ を 使う と 、 オ プ ジ ェ クト を 数 
値 で な い 状 態 に 変更 する こと が で きま す 。 

JavaScript1.1 で 追加 され た オプ ジェ クト で す が 、Netscape Navigator 3.X の 一 部 で は 動 
作 し な い 場 合 が あり ます 。 


<SCript type="text / avascr1ipt"> 

に (コー 

myNumber = new Number(100): 
document .write (myNumDber) : 

document .Write ( "<br>" ) : 

document .write (isNaN (myNumber) ) : 
document .wr1e ( "<br>" ) : 
document . write ( isNaN (myNumber . NaN) ) : 
//-ー テ > 

く / SCr1D キ > 


も >) ISNaN() : 「 ビ ルト イン 関数 (top-level 関数 )」 の 「 数 値 か どう か を 調べ る 」(P.599) 


376 0em オ フタ ェクト 
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使用 可能 な 数 値 の 範囲 を 調べ る 


オブ ジェ クト 名 .WTAX_VALUE [プロ パテ ィ ] 
ブ ブ ジ ェクト 名 .WIIY_VALUEE [プロ パテ ィ ] 
オブ ジェ クト 名 .IEGATTVEE INFTNITY [プロ パテ ィ ] 
ガブ ブ ジェ クト 名 .POSTTTVEE TFTINITY [プロ パテ ィ ] 


WOBSFTTUSSIIMTTITUHTTnd を AT は 41 


イル (P) 編集 表示) お 気に入り ⑯ ウー ル ① へ ヘルプ ⑪ 
GO の 回 較 人 の の we 9wop 


# 使 用 可能 な 数 値 の 範囲 を 調べ る 


最大 値 :1.7976931348623157e+308 
最小 値 :5s-324 

負 の 無限 大 :-Infnity 

無限 大 :Infinity 





Number オプ ジェ クト に は 、 数 値 の 有効 範囲 を 取り 扱う 多く の プロ パテ ィ が あり ます 。 
「MAX_VALUE」 プ ロ パ ティ は JavaScript で 扱え る 値 の 最大 値 を 、「MIN_VALUE」 プ ロ 
パテ ィ は JavaScript で 扱え る 値 の 最小 値 を 、「NEGATIVE_INFINITY] プ ロ パ ティ は 人 負 
の 無限 大 の 値 を 、「POSITIVE_INFINITY」 プロパ ティ は 無限 大 の 値 を 、 そ れ ぞ れ 持 っ て 
いま す 。 


ai 


<SCript type=" ex / avaScCr1pt"> 

リー 

document . write( "最大 値 :" + Number.MAX VALUE) : 
document .write( "<br>" ) : 

document . write( "最小 値 :" + Number .MTN_VALUE) : 
document . write ( "<br>" ) : 

document . write ( " 負 の 無限 大 :" + Number.NEGATTVE_TNFTNTTY) : 
document . write ("<br>" ) : 

document . write ( "無限 大 :" + Number .POSTTTVE TNFTNTTY): 
km ご テ 

</ SCr1pt> 
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オブ ジェ クト (配列 ) の 数 を 取得 する 


[プロ パテ ィ ] 


【 サ ポー ト し て いる オブ ジェ クト 】 
Button, Checkbox. FileUpload. Form. Frame. Hidden. Image. Layer. Password, Plugin. 
Fadio. Heset, Select, Submit. Text. Textarea. window 


【 サ ポー ト し て いる 配列 】 
anchors. applets, elements( フ ォ ー ム 内 の 値 ), embeds. forms. frames. history. images. 
layers. links, mineTypes, options, plugins 





EREPTUSNJMSIETIIIUITYI 


イル) 起業) 表示 お 気 に 和 0 ウー ル D ヘル ブ ⑪ 
の の 回 回 人 @ の ws 宮 5moo 


ォ * オ プ ジ ェ クト (配列 の 数 を 取得 する 





プロ パテ ィ や メソ ッ ド の 中 に は 、 複 数 ある い は すべ て の オプ ジェ クト で 使用 で きる も 
の が あり ます 。 

[length] プ ロ パ ティ は 、HTML ファ イル 内 の オプ ジェ クト や 配列 の 数 を 取得 し ます 。 
実際 に 試す 場合 に は 、 こ の 他 に も 「pagel.hml」-「page3.htmll の 3 つの HTML ファ イル 
を 用 意 し て くだ さい 。 


EE 揚 es 


<Form name="kasu1 "> 
<1npu type="Eext" name="X" Ss1ze="10"> 
</ form> 
<Dr> 
<a hrefF="page1 .htm1 ">1 ペー ジ 目 </a> : <a href="page2 .htm1 ">2 ペー ジ 目 </a> 
: <a href="page3 . htm1 ">3 ペー ジ 目 </a> 4 
<hr> 
< く SCrip ype="Eex/ avaSor1p キ "> 
に 1 コー 
var moz1 = "この 文字 は 何 文字 で し ょ うか ": 
document .write ( "文字 の 数 :" ,mozi .1ength, "<br>" ) : 
document .write ("ヒス トリ ー の 数 :" ,history.1ength, "<br>" ) : 
document .write(" リ ンク の 数 :" , document .1inks .1ength, "<br>" ) : 
document .write ("フォ ー ム の 数 :" , document .Eorms .1ength, "<br>" ) : 
に に 
く / SC エ 1D セ > 














200 雪 の オブ ジェ クト で 仁 用 で きる プロ ティー オン ッ ド 


品 誠 
EN 
いい トー】 


ピオ セレ 2( 革 -] 」 に ュ に 7 ん -) 


narme [プロ バテ ィ ] 


万 re7ox 
Moz/a 


【 サ ポー ト し て いる オブ ジェ クト 】 
Button, Checkbox. FileUpload. Form. Frame, Hidden. Image, Layer, PasSword. Plugin, 
Radio, Reset. Select. Submit. Text. Textarea, window 


入 CYSamples\js\D3other\01fukn: 

カイル 坊 要 ) 表示 お 気 に 和 0 

OGs の の の es 誤 5mOp 
* オ プ ブ ジ ェクト に 名 前 を 付け る OperaZ 


Opera6 


加 加 回民 軸 
に 3 に に 3 に 3 (ご) 


5a7ag/ 
圧 5-ac 


た 4-mac 


到 叶 
内 
数 
8 
和 
用 
す 
る 





フォ ー ム エレ メン ト の 値 


イメ ー ジ の URL(NAMP: 
file///C./Samples/j ぉ /03other/01 fukusu/02/imags jpg 
イメ ー ジ の URL( 配 3: 
fle///C./Samples/ 呈 /03other/01fukusu/02/image jpg 
フォ ー ム の 内 容 (NAME): フ ォ ー ム エレ メン ト の 値 

フォ ー ム の 内 容 (@C3: フ ォ ー ム エレ メン ト の 値 





Link 関連 の オプ ジェ クト 以外 の HTML タグ を 使用 する オプ ジェ クト で は 、HTML タグ 
内 に 「name」 プ ロ パ ティ を 設定 する こと に よっ て 、 オ プ ジ ェ クト に 名 前 を 付け て 、 明 示 
的 に オプ ジェ クト を 参照 する こと が で きる よう に な り ま す 。 

サン プル で は 、Image オプ ジェ クト と Form オブ ジェ クト に 「name」 プ ロ パ ティ で オブ 
ジェ クト に 名 前 を 設定 する こと に よっ て 、 そ の 名 前 で 配列 と 同じ よう に オプ ジェ クト 
の 色々 な 値 を 参照 し て いま す 。 


ETT 呈 ーーーーーーーーーーー 


<D> 

<1mg src="1mage.Jpg" name="kao" a1t="jkao" width="110" height="110"> 
< く /p> 

<D> 

<fForm name="NATYOU"> 

<input type="text" name="naiyou" size="30" value=" フ ォ ー ム エレ メン ト の 
値 "> 4 
</ form> 

< く /p> 


<SCript type=" て text/]avaSCript 上 "> 

に ルー 

document .write(" イ メー ジ の URL (NAME) :" ) : 
document . write (document . kao . SrC) : 
document . write ("<br>" ) : 


の オプ ジ ェクト で 人 で きる プロ バ パティー メン ッ ド 201 








document .write ("イメ ー ジ の URL (配列 ) :" ) : 

document .write (document . images [0] .src) : 

document .write ( "<br>" ) : 

document .write ("フォー ム の 内 容 (NAME) :" ) : 

document .write (document .NATYOU . naiyou .Va1uG) : 
documen .write ("<br>" ) : 

document .write ("フォ ー ム の 内 容 (配列 ) :") : 

document . write (document .forms [0] .e1lements [0] .value) : 
ニニ シ 

</ scr1pt> 


これ か ら の Netscape 

Netscape の 開発 を 行っ て いる AOL は 、 ら 004 年 1 1 月 30 日 に 次 期 バ ー ジ ョ ン 
の プロ ト タ イ ブ を 開発 者 向け に 発表 し 、 さ ら に 2005 年 3 月 に は 一 般 向 け の ベー タ 
版 を 公開 し まし た 。 

それ まで は 、「AOL は Netscape の 開発 を や め る の で は な いか 」 と の 憶測 も 流れ 
て いて 、Netscape の 将来 を 危 点 お 声 も 出 て いま し た 。 し か し これ で 、AOL が 引き 
続き Netscape の 開発 を 続け て いく 意志 が ある と 解釈 で きま すし 、 そ の 意味 で も 安 
心して いる 人 も 多い の で は な いで し ょ よう か 。 


Sa ね // 
/E5-mac 
話 4-mac 





今回 発表 され た Netscape で は 、 ベ ー ス が Mozilla か ら Firefox が と な り ま し た 。 
また 、 次 期 バ ー ジ ョ ン の 最大 の 特徴 は 、Netscape 標準 の レン ダリ ング エン ジン で 
ある Gecko と 、Windows に 含ま れ て いる Internet Explorer の エン ジン と の ら 種 
類 を 切り 替え られ る こと に あり ます 。 

現在 、 も っ と も シェ ア の 高い ブラ ウザ は 、Internet Explorer で す 。 そ の た め 、 
Web の 本 来 の 理念 か ら は 大 きく 外れ て し まう こと を 妥協 し て 、Internet Explorer 


で し か まとも に 見 る こと が で き な い サイ ト が 数 多く ある こと も 事実 で す 。 し か し 、 
今回 の Netscape が と っ た 対応 に より 、「 通 常 は Gecko を 使っ て サイ ト を 表示 し 
て 、Internet Explorer 用 に 独自 に 作ら れ た サイ ト は Internet Explorer に 切り 替え 
て 表示 する 」 と いっ た 運用 が 可能 に な り ま す 。 

も ちろ ん 、Windows 内 に 含ま れる Internet Explorer の コン ポー ネン ト を 使用 す 
る こと に な る の で 、 こ の ブラ ウザ は Windows 版 し が 発表 され て お ら ず 、 他 の 0S 
で どの よう な 対応 に な る か は 、 ま だ 未定 で す 。 また 、Internet Explorer が 08 と 深 
く 結び つい て いる と ころ か ら 来 る 、Internet Explorer 自身 の セキ ュ リ ティ 上 の 問 
題 も 、Netscape に 引き 継が れ て し まう 可能 性 が 高い と いう 問題 点 も あり ます 。 


な に 作 


評価 は 始ま っ た ば か りな の で 、 現時点 で は 、 次 期 Netscape が どの よう な も の に 
な る か 、 ま だ わか り ま せん 。 

し か し 、 今 で も レン ダリ ング エン ジン に Gecko を 使っ た ブラ ウザ や 、Internet 
Explorer の コン ポー ネン ト を 使っ た 、 い わ ゆ る 互換 ブラ ウザ と 呼ば れる ブラ ウザ が 
発表 され て いま す 。Netscape の 動向 に よっ て は 、 今 後 は それ ら の 互換 ブラ ウザ で 
も 、 複 数 の エン ジン を 切り 替え で きる ブラ ウザ が トレ ンド に な っ て いく か も し れ ま 
せん 。 
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新た に プロ パテ ィ を 作成 する 


prototype [プロ パテ ィ ] 
constructor [プロ パテ ィ ] 
[サポ ー ト し て いる オブ ジェ クト 】 


Array, Boolean. Date. Function, Image. Number .Select. option, String, ユー ザー 作成 オ 
ウジ ェクト ド 


E 計 は お FT EETTUTHEUIITYETEIEET は は 311]| 
プイ ル (P) 編集 人 E) 表示 お 気 に 入 D⑯ ツー ル ① ん プ ⑪ 


Os ・ の 回 回 の の 時 実 sm 


* 新 た に ブロ バテ ィ を 作成 する 


た た 今 の 日 時 は :2005 年 2 月 24 日 222324 
オブ ジェ クト の 作成 元 : function DateO 【 [native code] 1} 





「prototype」 プ ロ パ ティ は 、 new 演算 子 で 作ら れ た オプ ジェ クト に 、 明 示 的 に プロ パテ ィ 
を 追加 し ます 。 

サン プル で は 、new 演算 子 で 作ら れ た today オプ ジェ クト に 対し て 、「prototype」 プ ロ パ 
ティ を 使っ て 「newpro] と いう プロ パテ ィ を 新た に 作成 し て いま す 。 

また 、「constructor]」l プ ロ パ ティ は 、 関 数 名 も 含め た オブ ジェ クト の 作成 元 の 値 を 持っ て 
いま す 。 

あく まで も 作成 元 の 情報 だ け な の で 、 そ の オプ ジェ クト が どの よう な 値 を 持っ て いる 
か は 、「toSring()」 メ ソ ッ ド (次 項 の /「 オ プ ジ ェ クト を 文字 列 に 変え る 」) や 、「toSource()」 
メソ ッ ド (P.S87 の 「 オ プ ジ ェ クト 内 の 値 を 文字 列 に する ]) を 使う 必要 が あり ます 。 
JavaScriptl.1 で 追加 され た プロ パテ ィ で す 。 


ETLLLL 了 ーー 


<SCrip type="Eex 寺 /]avaSCr1pt"> 

で ルー 

today = new Date() : 

Date .prototype .newpro= "ただ今 の 日 時 は :" .bo1q ( ) : 

document .write(Eoday .newpro + oday .EoLoca1eStrind( ) ) : 
document . write ( "<br>" ) : 

document . write ( "オプ ジェ クト の 作成 元 : " + today .Constructor) : 
ん ニー 

< く / SCr1D セ > 
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【 サ ポー ト し て いる オブ ジェ クト 】 
すべ て の オブ ジェ クト 


良 C:\Samples\js\03other\D1 fukusu\04\ ぎ jndcx.html 一 開 i 


ファ イル (E) 編集 CE) 表示 ) お 気 に 和 AD ウール ① ヘルプ 
O*・ の 回 還 の の me 支 Pmoo 


* オ ブ ジ ェクト を 文字 列 に 変え る 


月 火 水木 金 土 

Thu Feb 24 21.0000 UTC+0900 2005 
file7//C7Samplss/js/03other/01fukusu/04/index html 
文字 列 に すべ き 内 容 が な い 時 : [object] 





「toSuing0」 メ ソ ッ ド は 、 オ プ ジ ェ クト を 文字 列 に 変換 し ます 。 
Netscape Navigator 2.0 で この メソ ッ ド を 使用 する と 、 一 部 の プラ ウザ で は 動作 が 不安 
定 に な る 場合 が あり ます 。 


く SCF1pt type="Eex 上 /avaSsC て 1pt"> 

れれ ュー 

var YOUBT = new Array(" 月 "," 炎 "" 水 " " 木 "," 金 "," 土 ") : 
document .write (YOUBT .to8tring() + "<br>") 

var oday = new Date() : 

document .write(today. も to8tring() + "<br>") : 

document .write(1ooation.toString() + "<br>") : 

document .write( "文字 列 に すべ き 内 容 が な い 時 :"+window.to8tring() ): 
/ ソ ーー テ 

</ scrip キ > 





硬 
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| 
Km 
mn 


n 進 数 に 変換 する 


メソッド] 
re7ox 
ん 2 た 


語 
mn 
に 


ET お FTTUI は SKIUEAUITTETUTTT は 11.]| 


アイ ル () 編集) 表示 お 気 に 和 DO@ ツー ル ①D AM2⑪ 
O・ の 回 回 人 @ の me moo 
*n 進 数 に 変換 する 


10 進 数 :0 2 進数 :0 18 進 数 :o 
10 進 数 :1 2 進数 :1 1 進数 :1 
10 進 数 :2 2 進数 :10 16 進 数 :2 
10 進 数 :3 2 進数 :11 16 進 数 :3 
10 進 数 :4 2 進数 :100 16 進 数 :4 
10 進 数 :5 2 進数 :101 16 進 数 :5 
10 進 数 :6 2 進数 :110 16 進 数 :6 
10 進 数 :7 2 進数 :111 16 進 数 :7 
10 進 数 :8 2 進数 :1000 16 進 数 :8 
10 進 数 :9 2 進数 :1001 16 進 数 :g 
10 進 数 :10 2 進数 :1010 1 進数 :a 
10 進 数 :11 2 進数 :1011 16 進 数 :b 
10 進 数 :12 2 進数 :1100 16 進 数 :c 
10 進 数 :13 2 進数 :1101 16 進 数 :d 
10 進 数 :14 2 進数 :1110 1 進数 :e 
10 進 数 :15 2 進数 :1111 1 進数 :f 
10 進 数 :16 2 進数 :10000 16 進 数 :10 


上 コキ モコ 
に 1 に] 
に 3 トコ 


OpeyaZ 


LM206_ 


Sa ね 


Opeya6 


5-ma 
左 4-mac 





[toString0] メ ソ ッ ド で 「toSuring(n)」 の よう に 数 値 を 与え る と 、 n 進 数 の 数 値 を 返し ます 。 


EE 揚 - 


<sCript type="text/ avaScCr1p 上 "> 


3 
for (2c = 0z 区 で 177 Ft) 【 

document .write ("10 進数 :", x.to8tring(10), " 2 進数 :", x.to8trin 
g(2), " 16 進数 :", x.to8tring(16) , "<br>" ) : al 
前 
が が ーー 
く / SCr1D キ > 


の 還 半 る 問 上 











[メソ ッ ド ] 


【 サ ポー ト し て いる オブ ジェ クト 】 
すべ て の オブ ジェ クト 





Internet Explorer 6 


当 C-\Samples\js\03other\01fukusu\ 


アイ ル CE) 編集 (D 表示 お 気に入り ⑱ 
表 %・@9 am 還付 の wm 均 5m9 
* ォ オブジェ クト 内 の 値 を 返す 


月 火 水木 金 土 
1106278910069 







1913 〇 いる RI 
















lozilla Firefox 
Er ーg 表示 移動 人 ⑯ ブッ マー が ⑧) ウール D AM2GD 庄 
邊 ゆみ - 人 @@@ose 毛 
サブジェクト 内 の 値 返 す 。。 
月 , 火 , 水 . 木 , 金 , 土 
1106278950037 


名 e:///C:/Samples/js/03other/01fukusu/06/index.html 
返す べき 数 値 が な い 時 :[object Window] 





「valueOf0」 メ ソ ッ ド は 、 オ プ ジ ェ クト 内 の 値 を 取得 し ます 。 
JavaScriptl.1 で 追加 され た メソ ッ ド で す 。 


| Samplc 王 還 還 


< く SC エ 1p ype="EexE/]avascript"> 


記 寺 … 

Yar YOUBT = new Array ( W 月 * : * 改 『 * 水 * の * 木 *, * 金 " : 5 1 H 

間 document .write (YOUBT .Ya1ueOE ( ) + "<br>") : 

で var today = new Date() : 

利 document .write(today.Ya1ueOE ( ) + "<br>") : 

用 document .write (1ocation .va1ueOE ( ) + "<br>") : 

document . write ( "返す べき 数 値 が な い 時 : "+window.Ya1ueOE () + "<br>") : 
7 ニー テ 
< く / Script 上 > 


206 の オプ ジ ェクト で 仙 で きる プロ バテ イメ オッ ッ ド 


レア ルン オセ 4 し ゃ た さ / | まっ 





toSource( ) [メソ ッ ド ] 
【 サ ポー ト し て いる オブ ジェ クト 】 fre7ox 
すべ て の オブ ジェ クト (の 7 た) 


に 3 
kJ 
に 


Internet Explorer6 Firefox 1.0 


旧 集 D 


+ オ プ ジ ェ ト 内 の 値 を 文字 釣 に する "フシ ェクト AMO 人 を に する 


配列 「HAIRETU」 内 の 値 :P1 2 7235 2 2 ル 6 
プ ジ ェ クト 内 の 値 : Coww mdthizfaffs) 
0 


window オ ブ ジ ェクト 内 の 値 :0 





[toSource0」 メ ソ ッ ド は 、 オ ブ ジ ェクト 内 の 値 を 文字 列 に 変換 し ます 。 

[toStrring()」 メ ソ ッ ド で は 「[object Window]] の よう な 形式 で 表 さ れ て いた 値 の 詳細 も 取得 
する こと が で きま す 。 

JavaScriptl.3 で 追加 され た メソ ッ ド で す 。 

サン プル で は 、Netscape 6.X で ナビ ゲー タオ ブ ジ ェクト の 値 を 取得 する こと が で きま せん 。 


<SCript type="Eex 上 /]avaSCript"> 

<! ニー 

var HATRETU = new Array("17 "7270937 "49 "59 767): 

document .write( "配列 [HATRETU」 内 の 値 :"+HATRETU .toSource ( ) + "<br>" ) : 
var today = new Date(): 

document .write ("Date オプ ジェ クト 内 の 値 :"+today .toSource( ) + "<br>") : 
document .write("1ocation オ プ ジ ェ クト 内 の 値 :"+1ocation .toSource() + 2 
"用 

document .write( "window オプ ジェ クト 内 の 値 : "+window .toSource( ) ) : 

//ーー> 

</ SCr1DpE> 


の t 胃 当 る 尿 
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ァ ル とう コレ ルン ルン ン パル ヤル リル レス な ェ -) 
オフ ジェ クル 名 .print() メソッド ] 
【 サ ポー ト し て いる オブ ジェ クト 】 


window. Frame 


訓 
m 
ご 
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OB 人 ELTTEE2 SIIETIITTEUIETYWRTEU は TDI は 34UUL) 計 天下 ml 


アイ ル (E) 編集 GE) 表示 ⑭) お 気 に 入 D⑱ ツー ル ① ヘリ ルプ ⑪ 
GO や ・ の 回 回 の の as 容 bmo 


ウィンド ウ (フレ ー ム ) を ブリ ント する 








ミ 
< 






の リコ 4 
Opera6 





EIC7/』 









| 、 回 動 EPSON LP-8 | | 
| EPSON LP-8200c 記 昌 動 OKI MICROU 







| 服 昌 生 Canon LBP-1510 還 昌 動 OKI MICROL | 

| 

1 証 全 =。 mamesssl mos _ 吾 

| 、 状 藤 準 人 ロイ ルカ @ 

| 場所 】 
コト [プン 0 検索 ] | 






ーー ドー ニュ ーー デー ドー シー ニー 
の 3 べ て の ⑩ 部 吉 ⑥ h 
- 下 択 た 部 分 (D 現在 の ページ 








OX- 状 軒 @ hh "| 癌 単位 で EN 層 (⑰ 
0 ゆか 、 また は ペ ー ジ 入 較 の み を 入力 [ 由 : 財 




















三 三 三 prin0」 メ ソ ッ ド は 、 指 定 さ れ て いる ペー ジ を プリ ント し ます 。 
本 サン プル で は 、 プ ラウ ザ の プリ ント ボタ ン を 押す の と 同等 の 働き を する ボタ ン を 作成 
し て いま す 。 
JavaScript1.2 で 追加 され た メソ ッ ド で す 。 現在 の と ころ Macintosh 版 の ternetExplorer 
用 。 で は 、 サ ポー ト さ れ て いま せん 。 
す 
2 ENLLLLLu レ ニース | VV 
<form> 
<1nput type="butEton" name="prin" value=" Print!! " RM 
window.print ( ) "> 
< く / Eorm> 


(2 <input type="button>: form オ ブ ジ ェクト 」 の [ボタ ン を リン ク に 使う 」(P.420) 


109 の オプ ジェ クト で 用 で きる プロ パテ ィ ー メ ッッ ド 





ー 定 時 間 ご と に 処理 を 繰り 返す Less 


5.0 
/E4.0 


setInteryal( 女 理 , 礎 設 定 ) [メソ ッ ド ] 


clearInterval() [メソ ッ ド ] 
【 サ ポー ト し て いる オブ ジェ クト 】 


window. Frame 


妃 re7ox 









アイ ル ( 編集) 表示 移動 ⑬⑪ プ め マー ク B) ウ - ル D へ ルプ 等 
を - ゆ - 旧 9 の oela 

+ー 定 時 間 ご と に 処理 を 細 り 返す 

ーー アニ メー ショ ン に スタ ー ト ボタ ン と スト ッ プ ボタ ン を 付け る 


ー setlnterval 


スト 52 






Lfrefox 
Moz 罰 a 
LA406。 


Sa ね / 
圧 5-mac 
リア ルン Fl3 















イル) 壮 集 D 表示 移動 ブッ Xー つ ク ⑧ ウ - ル D AM2⑪ 人 
を - ゅ -@@G の om 加 

+ー 定 時 間 ご と に 理 を 細 り 返す 

コア ニメーション に スタ ー ト ボタ ン と スト ッ プ ボタ ン を 付け る 


ー setlnterval 


OrQO MSG 22R-2 2-AD AM20D 
年 - ゆ - 人 の の om 加 


*ー 定 時 間 ご と に 処理 を 紹 り 返 
つ ア ニメーション に スタ ー| タン ょ と ストップ ボタ ン を 付け る 


ー setinterval 










alinyzll 


「setfnterval)」 メ ソ ッ ド は 、 指 定 し た 時 間 後 に 1 度 だ け 処理 を 行う 「serTimeout)」 メ ソ ッ 
ド と は 違い 、 指 定 さ れ た 処理 を ミリ 秒 単位 で 繰り 返し 行い ます 。 

サン プル は 、「Image オプ ジェ クト 」] の 「 ア ニメーション に スタ ー ト ボタ ン と スト ッ プ ボ 
タン を 付け る |(P.458) を 、「setInterval()」 メ ソ ッ ド を 使っ て 書き 直し た も の で す 。 
「setnterval()」 メ ソ ッ ド を 停止 する 時 は 、|clearInterval()」 メ ソ ッ ド を 使用 し て 、 
[setTimeout0」 メ ソ ッ ド の 用 法 と 同じ よう に 「clearInterval(ID 名 )] と TD を 設定 し て 使用 
し ます 。 

JavaScript1.2 で 追加 され た メソ ッ ド で す 。 














リア 見 / 
Pyefox 
Moz/a 
7 
6.X 
_ M4.06 
AX 


Sa7g9// 





EYE 本 許 エエ バエ ヤ エ ヤ ャ ぎる ゎ ⑧ キ リキ トム キム ね ネ ね 々 も ネ ニク へ? ツ ペ ニ 


<!DOCTYPE HTML, PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1><head> 
<meta http-equiv="Conten-Script-Type" content=" 上 ex/aVaScr1p 上 "> 
<meta htp-equ1v="Content-Sty1e-Type" conten="Eext/css"> 
< 上 1 上 ]e></ 上 1 上 ]e> 
<SCr1pt ype="Eext/]avaSsCr1pt"> 
ーー 
Var TmageSetA = 1: 
ANTMA = new Array() : 
for(1 = 1: ュ < 6: 1++) 【 
ANTMA[i] = new Tmage() : 
ANTMA[1] .src = "image"+ ュ オー ".Jpg": 
} 
function anime1() { 
document . animation.SrC = ANTMA [TmageSetA] .sro: 
TmageSeA++ : 
ifF( TmageSetA > 5) { 
TmageSetA = 1: 
} 
} 
Function stop1 ( ) { 
で 1ea エ エロ n ヒ @ ェ Ya1 ( エロ セ @ ェ Ya エエ D) : 
} 
(0 パコ コタ 
</ SCr1Dpt> 
<sty1e type= "text/Css"> 
で ルー ュ 
body { background-co1or: #EFFFFF: } 
og 雪 
</ sty1e> 
</head> 
<body> 
*ー 定 時 間 ご と に 処理 を 繰り 返す <br> 
ーー ア ニメーション に スタ ー ト ボタ ン と スト ッ プ ボタ ン を 付け る <br> 
- setTnterVa] - 
<D> 
<1mg Sro="1mage1 .Jpg" name="animation" a1t="Animation" border="0" 
width="100" height="100"> 4| 
く /p> 
<form> 
<input type="button" value=" スタ ー ト " onc1ick=" ae 
Tnterva1 ('anime1() ',500)"> 
<input type="button" value=" スト ッ プ " onc1ick="stop1 ( ) "> 
</ form> 
</body></htm1> 





カー ソル の 位置 を 取得 する 


ガブ ジェ クト 名 .captureEBvents( 巨 en た イベ ント タイ プ / 巨 ven た プア 


ベント タイ プリ / 。 う ) [メソ ッ ド ] 
【 サ ポー ト し て いる オブ ジェ クト 】 


window. document 









アイ ル E) 紀 集 D) 表示 移動 ⑤ プッ 2Y-2⑧ ツー ル D AM20⑳ 境 
トコ し 20 1 | 守 王 昌 
* カ ー ソ ル の 位置 を 取得 する 


X 軸 :hn04 
Y 軸 :hoe 





















アイ ル (D 罰 業 ) 表示 移動 ⑬ フッ マー ク ⑧ ウー ル ① へ 2⑪ 夫 
生 - ゅ 大 Gowg 


* カ ー ソ ル の 位置 を 取得 する 






アイ ル (D 電信 6) 表示 衝動 ⑪ プッ クマ -2⑧ ウー ル D AZ 維 
JAL 24 AEokJ に 


カー ツル の 位置 を 取得 する 






「captureEvents()」 メ ソ ッ ド は 、 取 得 し た い イ ベン ト を 設定 する こと が で きま す 。 複数 の 
イベ ント を 設定 し た い 時 は 、|「window.captureEvents(Even. イ ベン ト タ イ プ | EvenL イ ベ 
ント タイ プ | .…)] と 記述 し ます 。 

サン プル で は 、「captureEvents()」 メ ソ ッ ド で 設定 し た 時 に の み 使 用 可能 な イベ ント 
MouseMove を 設定 し て 、 マ ウス カー ソル が 移動 する た びに カー ソル の 位置 を 取得 し 、 
フォ ー ム に 書き 出し て いま す 。 

イベ ント タイ プ の 記述 は 、 サ ンプ ル の よう に 「mousemove] と する か 「MOUSEMOVE」 と 
記述 し て くだ さい 。「onMouseMove」 や 「MouseMove」 と いっ た よう に 大 文字 ・ 小 文字 を 
混ぜ て 記述 する と 、Windows 版 の Netscape Navigator4.X で は 動か な い 場 合 が あり ます 。 
JavaScript1.2 で 追加 され た メソ ッ ド で す 。 


/7/re7ox 
(2 た 】 
リル 
6.X 
4.06 
4.X 





ひい sH 衣 涯 る 癌 滴 上 





本 で 


万 e7ox 
た 】 

。 AZX 
6.X 
A4.06 
_A4X 


Sa ね / 





| 


< く !DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona]1 / /EN"> 
<htm1> 

<head> 

<meta hp-equ1i マ ="Content-Soript-Type" conten ヒ =" ex 上 /avascr1p 上 "> 
<meta htEp-equiv="ConEtent-Sty1e-Type" content="Eext/css"> 

< ヒュ 上 1@e></ 上 上]1e> 


<SCr1ipt type="text/]avaSCr1p 上 "> 

で リー ニニ 

function Cap(e) ( 
documert . forms [0] .e1ements [0] .value 
document . forms [0] .e1ements [1] .value 
reEurn rue: 


e.DageX: 
Ge.DageY: 


} 
window.CaptureEVents (Event .mougemove ) : 
OnmOouSemOve=CaD : 

(な ん こみ 

</ SCr1pt> 


<sty1e type="Eext/css"> 

く ! ーー 

body { bacjkground-cCo1or: #FFFFFF: } 
ーー テ > 


</sty1e> 


</head> 

<body> 

* カー ソル の 位置 を 取得 する 

<D> 

<form name="ECAP"> 

X 軸 : <input type="Etext" name="ecap" size="10"> 
<br> 

Y 軸 : <input type="Eext" name="ecap" size="10"> 
</ Eorm> 

< く /p> 

</jbody> 

</htm1> 


イベ ント を 引き 渡す 


オブ ジェ クト 名 .handleEBvent( 盛 Ye れ た プペ ベン ト タ イ ププ) [メソッド] 


【 サ ポー ト し て いる オブ ジェ クト 】 
すべ て の オブ ジェ クト 


























* イ ベン ト を 引き 渡す 
Be 








この ペー ジ の リン ク は 現在 棚 和 し ませ ん 








「handleEven()」 メ ソ ッ ド は 、 取 得 し た イベ ント を 他 の オプ ジェ クト に 引き 渡し ます 。 
サン プル で は 、 関 数 [Cli)」 の 中 で 、「window.document.links[0].handleEvent(e)」 に よっ て 
リン ク 内 に 設定 し て いる 「onClick="CI20"] に イベ ント を 引き 渡し 、 関 数 [CIi2()」 を 発生 
させ て いま す 。 

この 状態 で は 、 関 数 [Cii)」 内 で 設定 し た 警告 用 の ダイ アロ グ ボ ックス が 開い た 後 、 関 
数 [Ci2()] で 設定 し た 警告 用 の ダイ アロ グ ボ ックス が 開き ます 。「CiiO」 内 の 「alert0」 と 
「handleEvent0」 の 設定 の 順番 を 逆 に する と 、「CIi20」 の 評価 が [CIiO」 内 で 設定 し た 警告 
用 の ダイ アロ グ ボ ックス が 開く 前 に 発生 する の で 、 ダ イア ログ ボッ クス の 開く 順番 が 
逆 に な り ま す 。 

イベ ント タイ プ の 記述 は 、 サ ンプ ル の よう に 「click」 と する か 「CLICK」 と 記述 し て くだ 
さい 。「onClick」 や 「Click」 と いっ た よう に 大 文字 ・ 小 文字 を 混ぜ て 記述 する と 、Windows 
版 の Netscape Navigator 4.X で は 動か な い 場 合 が あり ます 。 

JavaScriptl.2 で 追加 され た 、 イ ベン ト を 取り 扱う すべ て の オプ ジェ クト で 使用 可能 な 
メ ツ ウド で す 。 








の *H 還 藻 


の ォ フ ジェ クト で 上 で きる プロ ティ トメ ッッ ド 393 





ee 


<!DOCTYPE HTML。 PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1> 

<head> 

<meta http-equiv="ConEtent-Socript-Type" conten ヒ =" tex 上 / avascr1pt"> 
<meta http-equ1iv="Content-Style-Type" content="Eext/css"> 

< 上 1 上 1e></ 上 1 上 1e> 


<SsCript type=" tex 上 /]avaSsCr1pt"> 
<!ーー 
function C]i(e) { 
al1ert ("この ペー ジ の リン ク は 現在 機能 * し ませ ん !!") : 
window.document .11njks[0] .hand1eEvent (@) : 
return fa]se: 
} 
function C112() { 
alert ( " 申 \ し 訳 あ り ま せん !! も うし ば らく お 待ち くだ さい m(_ _)m') : 
returnm 上 TUG: 
} 
window .captureEvenEs (Event .c1ick) : 
onc1ick=C11 : 
が が ゴジ 
</ SCr1Dp ヒ > 


<style type="text/css"> 

必 な ー 

body { background-co1or: #EEFFFF: )} 
ーー テ > 

</ sty1e> 


</head> 

<body> 

* イ ベン ト を 引き 渡す 

く D> 

<a hreF=" . ./../home.htm1" onC]1ick="C112 ( ) ">Home へ . . .</a> 
</p> 

</body> 

</htm1> 


>) 


イベ ント を 解放 する 


ガブ ジェ クト 名 .releaseEBvents( 盛 ven た イベ ント タイ プ ) [メソッド] 
【 サ ポー ト し て いる オブ ジェ クト 】 


window, document. layer 



































* イ ベン ト を 語 放 する 
jame へ (作成 中 








還 且 まっ を お 思 る き けら 押 回 
イベント を 衣 取 する 











次 の サー バ の 場所 を 見 つけ ち れ ませ ん : (名 前 が 設定 され 
て いま せん ) 
サー バ 名 を 確認 ん て 、 も う 一 度 や 9 直 ん て くだ さい 。 


















[releaseEvents()」 メ ソ ッ ド は 、 指 定 し た イベ ント を 解放 し ます 。 

サン プル で は 、 リ ンク の 中 に 「onMouseOull の イベ ント を 設定 し て いる の で す が 、 こ の 
イベ ント は 、1 度 ウィ ンド ウ が クリ ッ ク さ れる と 関数 [CliO」 が 発生 し 、 関 数 内 で [release 
Events(Event.MouseOu)」 に よっ て イベ ント が 解放 きれ る まで は 評価 され ませ ん 。 

つま り 、 リ ンク が クリ ッ ク さ れる まで は マウ スカ ー ソ ル が リン ク の 上 に 乗っ て も 外れ 
て も 何 も 起 こち な い の で す が 、1 度 リン ク が クリ ッ ク さ れる と 、 そ れ 以 降 は リン ク 上 か 
ら マ ウス カー ソル が 外れ る と イベ ント が 発生 し 、 警 告 用 の ダイ アロ グ ボ ックス が 開く 
よう に な り ま すず 。 

サン プル は 、Macintosh 版 の Netscape Navigator 4.X で の み 動 作 が 確認 され て いま す 。 
JavaScript1.2 で 追加 され た メソ ッ ド で す 。 


ED 己 se 


<Script type="text/]avascr1pt"> 
= 
function C]i (e) 【 


window.re1easeEvens (Event .mouseou ) : 





の ォ プ ジェ クト で で まる プロ パティー メッ ッ ド 3 





returm 上 エ UG: 

} 

Function Mou() { 
alert ( " 申 \ し 訳 あ り ま せん !! 現在 リン ク が 切れ て いま す m(_ _)m") : 
re て urn 上 rUG: 

} 

window .captureEvents (Event .C11ck) : 

onc1ick=C11 

テッ 

</ SCr1ip キ > 

一 中略 て 

ぐ D テ > 

<a href="http: //" onMouseOut="Mou ( ) ">home へ . . . (作成 中 ) </a> 

く /p> 


較 








(⑳ onclick: リ ファ レン ス 「 イ ベン ト タ イ プ 」 の 「Click」(P.68 ら ) 
onMouseOut : リ ファ レン ス 「 イ ベン ト タ イ プ |」 の 「MouseOut」(P,623) 


| | 計 


「eval()」 の 変遷 

JavaScript の 中 で 、「eval()」 ほ ど 扱い の 変更 を 繰り 返し た も の は 、 ほ か に な いで 
し よう 。 

元々 「eval(0」 は 、JavaScript 1 .0(Netscape Navigator 2.0 一) で は ビル トイ ン 
関数 と し て オブ ジェ クト と 結び 付け られ て いま し た 。 し か し 、JavaScript1.1 
(Netscape Navigator 3.0) か ら は メソ ッ ド に な り 、 そ れ が JavaScript1. ら 
(Netscape Navigator 4.0) か ら は 再び ビル トイ ン 関 数 と な り ま し た 。 

さら に 、 実際 に サポ ー ト し た ブラ ウザ は 発表 され ませ ん で し た が 、JavaScript1.4 
か ら は Object オブジェ クト の メソ ッ ド に な り 、 加 えて 「eval()」 メ ソ ッ ド は 間接 的 に 
呼び 出す こと は で き な い と いう こと に な り ま し た 。 

さす が に 、 こ れ で 一 段落 する だ ろう と 思っ て いた の で す が 、Netscape 6.0 か ら 
サポ ー ト され て いる JavaScript1.5 の リフ ァ レ ンス で Object オブ ジェ クト の 項目 
を 見 て みる と 、「The eval method iS no longer available as a method of 
Object. Use the top-level eval function.」 の 1 文 が 見 られ まし た 。 つ まり 、 
JavaScript 1 .5 で は 、 再 度 ビ ルト イン 関数 に な っ た の で す 。 

ちな み に 、「eval()」 は メソ ッ ド で あっ て も 、 す べ て の オブ ジェ クト で 使え る よう 
に な っ て いた の で 、 実際 は ビル トイ ン 関 数 と 同じ 感覚 で 使う こと が で きま し た 。 し 
か し 、 す べ て は ECMAScript と 仕様 を 統一 する た め と は いえ 、「 ち ょ っ と これ は 変 
わり すぎ で は な いか 」 と いう 印象 は 耕 め ませ ん 。 今 は 、 紀 余 曲 折 の 未 に 元 に 戻っ た 状 
態 な の で 、 こ の まま 仕様 が 落ち 着い て くれ れ ば 本 当 に いい の で す が 。 


の 還 半 る 難 上 








ーー ーー こと ニニ ーー OFnRPFP 


フォ ー ム に 入力 され た 文字 列 を 計算 で きる よう に する 
[ビル トイ ン 関 数 





Before 
当 CYSamplesYjsY03pth 


ファ イル 編集 D 表示 ⑩ ⑳ ッ - ル D AM プ ⑬ 


OR・ の 回 還 の の me 審 moo 


ファ イル (P) 編集 FV お 気に入り (@) ツー ル ① へ ルプ ⑱⑪ 
OR の 回 回 の の wm 衣 woo 


* フ ォ ー ム に 入力 され た 文字 列 を 計算 で きる よう に する 


* フ ォ ー ム に 入力 され た 文字 列 を 計算 で きる よう に する 


47980 |+ho057 |= [79a0 |+hio057 |=E5g037 


FN Ge 








ビル トイ ン 関 数 [evalO] は 、 設 定 し た 文字 列 を JavaScript の コー ド と て し て 評価 し ます 。 
フォ ー ム に 入力 され た 値 は 文字 列 で す の で 、 そ の まま で は 計算 する こと が で きま せん 。 
この よう な 場合 は 、「eval()」 を 使っ て 、 文 字 列 の 内 容 を 数 値 や 演算 子 と し て 評価 し 、 
JavaScript で 計算 で きる よう に し て か ら 計 算 す る 必要 が あり ます 。 

サン プル で は 、 フ ォ ー ム 「X」 と 「Y」 に 入力 され た 文字 列 を 、「eval0」 を 使っ て 数 値 と し て 
評価 し た 後 で 、 そ の 数 値 を 加算 し て 、 結 果 を フォ ー ム 「Z] に 表示 し て いま す 。 人 入力 さ れ 
た 値 を 計算 する スク リプ ト は 、JavaScript の 中 で も よく 利用 きれ る も の で す 。 フ ォ ー ム 
の 値 を JavaScript で 計算 する 時 は 、「eval)」 を 使う こと を 忘れ な いよ うに し て くだ さい 。 
「eval0」 は 、 た と えば 「eval("4+4")」 と 文字 列 を 評価 し た 場合 は 「4+4] を 計算 し た 「8」 の 値 
が 返り ます が 、「eval(new Sring("4+4))] と Surring オブ ジェ クト を 評価 し た 場合 は 、 文 
字 列 の まま 「4+4] の 値 が 返り ます 。 さ ら に 、 文 字 列 で 表 さ れ た 演算 子 や 、 そ れ に と も な 
う 一 連 の 計算 式 の ほか 、 変 数 や プロ パテ ィ の 評価 も 可能 で す 。 

「evalO」 の 扱い に つい て は 、 コ ラム 「「eval)」 の 変遷 ]( 左 ペー ジ ) を 参照 し て くだ さい 。 


| Sample 財 語 


<SCript type="Eext/]avasCript"> 

function calc(CL) { CL.Z.value = eva1(CL.X.Ya1ue ) +eva1 (CL.Y.Ya1ue) ) 
</ SCr1Dt> 

<D> 

<fForm name= "Ca1c"> 

<input type="Etext" name="X" value="0" size="10"> 

中 

<input type="Eext" name="Y" Value="0" size="10"> 


<1nput type="Eext" name="Z" size="10"> 

く /p> 

で ぐ D テ > 

<input type="button" value=" 計算 !! " onc1ick="ca1c(this.Form) "> 
<1npu ype="reset 上 " value=" Cl1ear "> 

</ Eorm> 

く /p> 
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同じ 階層 の イベ ント を 取得 する 


オブ ジェ クト 名 .routeHVent( 王 en た イベ ント タイ プ ) メソッド] 
【 サ ポー ト し て いる オブ ジェ クト 】 


Window. document, layer 








DID 


アイ ル (P 編集 表示 移 生 ブッ クマ ー ク ⑧) ツー ル D AM プ ⑪ 絆 
ゃ を - ゅ 人 の G@owEo 
+ 同 じ 階層 の イベ ント を 取得 する 
還 






作 rouleEvent か 5mcuseup の イベ ント を 受け 取り まし た 。 


「routeEvent)」 メ ソ ッ ド は 、「captureEvents()」 メ ソ ッ ド で 取得 し た の と 同じ イベ ント を 
返し ます 。 

サン プル で は 、|routeEvent(e)」 で マウ ス ボ タ ン が 離さ れ た 時 に 、 取 得 さ れん た イベ ント と 
同等 の イベ ント を 返し ます 。 

JavaScript1.2 で 追加 され た メソ ッ ド で す 。 


ET - 


<SCrip 上 type= "て tex 上 / avascr1pt 上 "> 

< ぐり ニー 

Function fun1(e) { 
alert ("document は " + e.type + "の イベ ント を 取得 し まし た 。 次 に route 

Event か ら イ ベン ト を 返し ます 。 ") : 4 
document .routeEven (@) : 
alert ("routeEvent か ら "+ e.type+" の イベ ント を 受け 取り まし た 。 " ): 
reEurn 上 TUG: 

} 

document . captureEvens (Event . onmouSeuDp) : 

document . onmouSeup=fFun1 : 

ルー ニッ 

</ 8Crip> 


も >) onmouseup : リ ファ レン ス 「 イ ベン ト タ イ プ 」 の 「MouseUp」(P.624) 





>4| レレ メー レル ルム て) 
[ビル トイ ン 関 ] 


当 C:*5amples\js\03other\D2builtin\02\index.html 


アイ ル (P) 編集 E) 表示 ) お 気 に 和 DQ⑱ ツー ル ①D ヘル プ ⑱ 


の 回 還る の 宮 5mo 


* 数 値 か どう か を 調べ る 


flse 
true 


ビル トイ ン 関 数 [isNaNO」 は 、 与 えら れ た 値 が 数 値 か ば うか を 調べ ます 。 
値 が 数 値 の 場合 は 「false] を 、 数 値 で な い 場 合 は 「mue」 を 返し ます 。 
バー ジョ ン 3.X 以 前 の Netscape Navigator で は 、UNIX 版 以外 は 機能 し ませ ん 。 


|Samplc 還 昌紀 


<SCr1pt ype="Eext/]avaScr1pt"> 
ベー ニー 

var n = 1.23: 

Var m = "Mozi": 
document .write (isNaN(n) ) : 
document .write( "<br>" ) : 
document .write (isNaN(m) ) : 

// ニ テッ 

< く / SCT1D> 
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* 有 限 数 か どう か を 調べ る 


true 
lse 
true 





ビル トイ ン 関 数 [isFinite()」 は 、 与 えら れ た 値 が 有限 数 か どう か を 調べ ます 。 

値 が 有限 数 の 場合 は 「true」 を 、 そ う で な いり い 場合 は 「false」 を 返し ます 。 

サン プル で は 、 有 限 数 で ある 「1.23] と 無限 大 を 表す 数 値 [mfiniy」 を 、「isFinite()」 を 使っ 
て 評価 し て いま す 。「!m」 は 「mfiniy] で は な いと いう こと に な る の で 、「tue」 の 値 が 返 
り ま す 。 

JavaScript1.3 で 追加 され た ビル トイ ン 関 数 で す 。 


SUS 


<Script type="tex 上 /]javaSsCr1pt"> 
に コージ 

Va で = ユエ.。23 ぁ 

var m = Tnfinity: 

document .wr1e (5 宮 3nite (np) ) : 
document . write ( "<Dr>" ) : 
document .wr1e (も 53n ミ Ee ( 地 ) ) : 
document .write ("<br>") : 
document .wr1e (も gnite( !m) ) : 
が / ニ ー> 

</ SCr1Dp キ > 








文字 列 を 整数 に 変換 する 
[ピル トイ ン 関 数 


当 C-\Samples\js\03other\02builtim\04\imdex.html 一 Mi 


プア イル) 編集 E) 表示 お 気 に AD ツー ル ① へ JI プ ⑬ 


@ 京 ・ の 回 回 の 時 実 sm 
文字 を 整数 に 変換 する 


ビル トイ ン 関 数 [parseIntO」 は 、 文 字 列 を 整数 に 変換 し ます 。 

小数 点 以下 は 切り 捨て られ 、 数 値 で な い 場 合 は 「NaN」 を 返し ます 。 

また 、「parseImt)」 は 、「parsent( 文 字 列 n)」 の 用 法 を 使う と 、 文 字 列 を n 進 数 と し て 値 を 
返し ます 。 た と えば 、16 進数 で 「parsent("Oxf'.16)」 ま た は 「parsemt("f'.16)」、8 進数 で 
「parseInt("017".8)」 ま た は 「parsemt("17".8)」、2 進数 で 「parsemt("1111".2)]、10 進数 で 
[parsemt("15".10)」 は 、 す べ て 「15」 の 値 が 返り ます 。 


| Sano 還 


<script type="Etext/]avascript"> 
く ! ニー 
var n = "1.234": 
Var 横 = "0。7779 
document . write (parseTnt (n) ) : 
document .write ("<br>" ) : 
document .write (parseTnt (m) ) : 
document .write ("<Dr>" ) : 
document .write (parseTnt (n)+parse エ nt ( 反 ) ) : 
document .write ("<Dr>" ) : 
document .write(parseF1oat ( "文字 と いっ て も これ だ と . . .") ) : 
が ん /ー ロ み 
</ Script> 
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文字 列 を 浮動 小数 点数 に 変換 する 
[ビル トイ ン 関 ] 


アイ ル (F) 編集 (E) 表示 ) お 気に入り (⑳ ツール ①D ヘルプ 


@ ゃ ・ の 回 回 人 る の wm pwoo 


* 文 字 列 を 浮動 小数 点数 に 変換 する 


1.234 
0777 
2011 
NaN 





ビル トイ ン 関 数 [parseFloat)」 は 、 文 字 列 を 浮動 小数 点数 に 変換 し ます 。 
前 項 の 「parseInt())] と は 違い 、 少 数 点 以下 は 切り 捨て られ ませ ん 。 数値 で な い 場合 は 
「NaN」 を 返し ます 。 


ELLL___ ーー 


<SCrip type="Eext/]avascr1pt"> 

くり ーー こ 

var n = "1.234": 

var m = "0.777"』 
document .write (parseF『1oat (n) ) : 
document . write ("<br>" ) : 
document . write (parseF1oat (mm) ) : 
document .write ( "<br>" ) : 


document .write (parseF『1oa (n ) +parseF1oat (mm) ) : 
document .write ("<br>" ) : 
document .write(parseF1oat ("文字 と いっ て も これ だ と ...") ) : 
ーー ニッ 
</ SCr1p キ > 








Before 
PCREPPTIMPAHTTIUTTAINTITNUITTTSSI 


アイ ル ⑥ 編集) 表示 お 気 に 和 D⑭) ツー ル OD へ MM2⑬ 
O・ の 回 回 の の we 到 Pmoo 


* 文 字 を ASGI 形 式 (URL 形式 ) に 変換 する 


After 
ES EET TTPSJSIRNITTSIUMTTIHUUNH SUITE 


アル 電 D 表 示 お 気 に AD④ ツー ル D へ ルプ 
中 ・ の - 還 国人 の の 誠 5R29 


* 文 字 を ASCH 形 式 URL 形 式 ) に 変換 する 


この テキ スト エリ ア に 入力 され た 内 容 が 、 ア スキ ー 形 


この テキ スト エリア に 入力 され た 内 容 が 、 ア スキ ー 形 
ER 家 夫 8 下 の テ キス ト エ リア に 表示 され ま ス 


式 に 誠 換 され て 、 下 の テキ スト エリ ア に 表示 され ま 


本 Cg 


Xu30537u306EXu30C6Xu30ADXu30B8Xu30C8Xu80A8u30EAZ 
080A2Xu306BXu5165Xu529BXu3055Xu308CXu305FXu5185X 
usB69Yui04C5u80012u8042Xv80B92u80AD5u8OFEXu5F627 
u5FOFXu306BXu5909Xu63DBXu3055%u808CXu8066Xu9001% 
u4E0BXus06EXu30C6Xu0ADXu30B9Xu80C8Xu30A8Xu30EAX 調 











Gr 








銀 CYSamplepyjsYD9otherY02bultinY06Ymdex html - Mg 


プア イル 編集) 表示 ⑰ お 気 に 和 0⑯ ツ - ル ①D AL2⑪ 
Op・ の 回国 の の wa 広 pmoo 


* 文 字 を ASGI 形 式 (URL 形式 ) に 変換 する 


この テキ スト エリ ア に 入力 され た 内 容 が 、 ア 」. 
式 に 実 換 さ れ て 、 下 の テキ スト エリ ア に 表示 


す 。 


スキ ー 
され ま 


CN 


ビル トイ ン 関 数 [escape()」 は 、 文 字 を ASCII 形式 の 文字 に 変換 し ます 。 
サン プル で は 、 上 の フォ ー ム に 文字 を 入力 し て [変換 !!] ボ タン を 押す と 、 下 の フォ ー ム 
に ASCI 形式 に 変換 され た 文字 が 表示 され ます 。 


< く !DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1><head> 

<meta http-equ1Y="Content-Script-Type" content="Eext / avascr1pt"> 
<meta http-equiv="Content-Sty1e-Type" content="text/css"> 

< 上 it1e></ 上 1 上 1e> 

<SCript type="text/ avaSscr1pt"> 

0 


ピル トイ ン 全 opt 603 





ト E)E)/』 


圧 5-ac 
在 4-mac 





人 
四 
4 
利 


ーー 


用 
す 
る 













function dec1 (C1 ) { document .Out1 .Decode1 .Value = に 
・Ya1ue) } 

が / ニ ニュ 

< く / SCr1pt> 

<sty1e ype="text/css"> 

く ! ーー 

body { background-co1or: #FFFFFF: } 

ーー テ 

</ sty1e> 

</head> 

<body> 

* 文字 を ASCTT 形式 (URL 形式) に 変換 する 

<form name="Tn1"> 

<textarea name="Tnput1" rows="5" co1s="50"> 
</textarea> 

< く D> 

<input type="button" va]ue=" 変換 !! " onc1ick="dec1 (this .form) "> 
<input type="reset" value=" Cl1ear "> 

< く /p> 

</ form> 

<fForm name="Ou 上 1 "> 

<texEarea name="Decode1" rows="5" col1s="50"> 
</ textarea> 

<D> 

<1nput type="reset 上 " value=" C]1ear "> 

< く /p> 

</ Form> 

</jbody></htm1l> 


それ は JavaScript の せい で は な いん だ けど 

よく 聞か れる 質問 で 、「 フ ォ ー ム か ら 送 られ る デー タ を 「mailto:」 オ プシ ョ ン で メー 
ル で 受け 取る よう に し て いる けど 、 メ ー ル で 受け た フォ ー ム の デー タ が 文字 化け し 
て 読め な い 』 と いう も の が あり ます 。 フ ォ ー ム 内 に JavaScript を 設定 し た サン ブル 
を Web ペー ジ 上 で 公開 し て いる の で 、 こ の よう な 質問 が 来る の で し ょ う が 、 こ れ に 
関し て まず 明確 に し て お くべ きこ と は 、「 こ れ は JavaScript と は 何 に も 関係 が な い ] 
と いう こと と 、「 そ の 文字 は 別に 文字 化け し て いる わけ で は な い 」 と いう こと で す 。 

フォ ー ム か ら 送 られ る デー タ は 、UHL 形式 と いう 形式 に 変換 し て 送ら れ ま す 。 
フォ ー ム か ら 送 られ て くる 「9%」 付 き の 文字 が 、 こ れ に な り ま す 。 し た が っ て 、 受 け 
取っ た デー タ は 、 元 の 読め る よう な 形式 に デコ ー ド する 必要 が あり ます 。 デ コー ド 
する ツー ル に は 、「ClipDecoderl な ど が あり ます 。 





Before After 
当 CYSamples*jsW03other\D2builtim\07*index.html  C \5amplesYjc03other\02builtin\07\imdex 
イル 編集) 表示 ⑦ お 気 に 和 AD⑱ ウー ル ① へ ルプ 0⑯ イル? 編集) 表示 ) お 気に入り ツー ル ①D ん ルプ ⑬ 


G 京 ・ の - 還 加 の の 害 5RD @ ま の 還 還 人 の の 宮 5m9 


*ASCI 形 式 の 文字 を デコ ー ド する *ASCI 形 式 の 文字 を デコ ー ド する 


7u3053Zu306EXu80C67u30ADXu30B9Xu80C8Xu30A8Xu30EAX Yu3053Xu806EXu30C6Xu80ADXu30B9%u30C8%u80A8Xu80EAZ 計 
30A2u306EXu5185Xu5BB3%u305FXu8001Zu4E0AXu305EX 030A2Xu806EYu5185Xu5BB9Xu306FXu3001Xu4E0AYu305EX 
30C6Mu30ADXu30BS%u30C6Xu8040#u0EAXu30A2Xu305B% C30C5Xu30ADXu30B9Xu30C8Xu30A8Xu80EAXu30A2Xu305BX | 
u5165Xu529BXu8055Xu308CXu805FURLXu80827u30C7% 5165Xu529BXu3055Xu308CXu305FURLXu3082u30C7% 
980B3u30FCXu30C9Xu3057%u805FXu3082Xu306EXu3087X 調 030B3Xu90FCXu30C8Xu3057%u305FXu3082XuS06EXu3067% | 





実 内 し Cear 











この テキ ス 
入力 され た 


リア の 内 容 は 、 上 の テキ スト エリ ア に 
URL を デコ ー ド し た も の で す 。 


だ 4-mac 


中 C-YSampleswjsYD3othe 


アイ ル ) 編集 (E) 表示 お 気に入り @ 
%・ の 回 還 の メ 
+ASGI 形 式 の 文字 を デコ ー ド する 


7u3053Xu306EYu30C6Xu30ADXu909Xu30C8Xu30A8%u80EAX 
u3042%u306EXu5185Xu5BB9Xu306FXuS001Xu4E0AXu306EX 
|u30C6Xu30ADXu0B9Xu30C8Xu30A8%u80EAXu30A2Xu306BX 
05165%u529BXu3055Xu308CXus05FURLXu3092Xu30C7X 
u30B3Xu30FCXu80C9Xu3057Xu305FXuS0827u306EXu3087% 


[Em Less 


CR 





ビル トイ ン 関 数 [unescape0」 は 、ASCII 形式 の 文字 を 文字 に 変換 し ます 。 

サン プル で は 、 上 の フォ ー ム に ASCII 形式 の 文字 (フォ ー ム か ら 送 られ て くる % 付 き の 
文字 ) を 入力 し て [変換 !!] ボ タン を 押す と 、 下 の フォ ー ム に 通常 の 文字 に 変換 され た 文 
字 が 表示 され ます 。 
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<!DOCTYPE HTMT, PUBLTC "-//W3C//DTD HTMT, 4.01 Transit1iona1 / /EN"> 
<htm1> 

<head> 

<meta htEtp-equ1v= "ConEen-Soript-Type" conten 上 =" 上 ex 上 / avaSCr1p 上 "> 
<meta http-equ1v="ConEenE-Styl1e-Type" Conten キ ="Eex 上 /oCss"> 

< 上 1 上 1e></ 上 1 ヒ 1e> 


<SCript type="Eext/]avaSCr1p 上 "> 

で !ーー 

Funotion dec (C) { document .Out2 .Decode2 .Yalue = unescape (C . エ nput 
2.va1ue) )} 了 
//-ー テ 

く / SCr1Dp セ > 


<style ype="Eext/Css"> 

<!ーー 

body { background-co1or: #EEFFFF: } 
コー 

</ sty1e> 


</head> 

<Dody> 

*ASCTT 形式 の 文字 を デコ ー ド する 

<fForm name=" Tn2"> 

<textarea name=" Tnput2" rowSs="5" cols="50"> 
</textarea> 

<D> 

<input type="button" va1ue=" 変換 !! " onc1ick="dec(this.Form) "> 
<1input type="rese" value=" Clear" > 

</p> 

く D></D> 

</ form> 

<form name="Out2"> 

<texEtarea name="Decode2" rows="5" co1s="50"> 
< く / textarea> 

く D> 

<1npu type="reset 上 " va1ue=" C1ear "> 

く /p> 

</ Form> 

</body> 

</htm1> 





[ビル トイ ン 関 数 ] 


その 他 の ビル トイ ン 関 数 
taint() 


JavaScript で は 、 セ キュ リティ の た め 、 通 常 は 別 の ウィ ンド ウ や フレ ー ム か ら プ ロ パ 
ティ な どの 値 を 参照 で き な い よう に な っ て いま す 。 ビ ルト イン 関数 [taint)」 は 、 一 時 的 
に その 規制 を 無効 に し ます 。 

参照 可能 に で きる の は 、 プ ロ パ ティ キ 関 数 、 オ プ ジ ェ クト な どの 値 で す 。 ま た 、「taint] 
が 有効 な 状態 か どう か を 調べ る た め に は 、navigator オブ ジェ クト の |taintEnabled()」 メ 
ソ ッ ド を 使用 し ます 。 

[taint()」 が 有効 な 時 の み 使 用 可能 な プロ パテ ィ と し て は 、document オ ブ プ ジ ェ クト の 
「domain]l プ ロ パ ティ 、 history オプ ジェ クト の 「currenll プ ロ パ ティ や 「nextl プ ロ パ ティ 、 
「previouns] プ ロ パ ティ が あり ます 。 

Netscape Navigator 3.0 で 対応 し た JavaScriptl.1 で 追加 され た ビル トイ ン 関 数 で す が 、 
Netscape Navigator 4.0 か ら は 、 セ キュ リティ 対策 は Signed Script を 使う こと に な っ た 
た め 、 JavaScript1.2 で は 削除 され まし た 。 

通常 の プラ ウザ で は 機能 し ませ ん 。 





| nntaint() [ビル トイ ン 関 数 ] 旧 


ビル トイ ン 関 数 [untaint()」 は 、「taintO」 に よっ て 一 時 的 に 別 の ウィ ンド ウ や フレ ー ム か 
ら 参照 可能 に な っ た プロ パテ ィ な どの 値 を 、 参 照 で き な い 状態 に 戻し ます 。 

Netscape Navigator 3.0 で 対応 し た JavaScript1.1 で 追加 きれ た ビル トイ ン 関 数 で す が 、 
Netscape Navigator 4.0 か ら は 、 セ キュ リティ 対策 は Signed Script を 使う こと に な っ た 
た め 、 JavaScript1.2 で は 削除 きれ まし た 。 

通常 の プラ ウザ で は 機能 し ませ ん 。 


の 池沼 導 川 


ピル トイ > 人 (op eve 和 607 











JavaScript 内 で 取り 扱え る 値 の タイ プ は 、 次 の 通り で す 。 


文字 列 

ダ プ ルク ォ ー テ ーション マー ク 「"|]、 ま た は シン 
グル クォーテーション マー ク | で 囲ま れ た 文字 
や 数 字 の こと を いい ます 。 


【 例 】 


"123" , "Moziretu" , ' 文 字 列 " 
以下 の 特殊 記号 も 文字 列 で す 。 

バッ クス ペー ス 
フォ ー ム フィ ー ド 

改行 

キャ リッ ジリ ター ン 
補 太 
バッ クス ラッ シュ 











(JavaScript1.5) 






バー ティ カル タブ 

アポ スト ロフ ィ ー ま た は シン グル 
クォーテーション 

8 進数 で 指定 され た 、Latin-1 の 
文字 コー ド に よっ て 表 さ れ た 文 
字 。 XXX は 、0 か ら 337 ま で の 
きつ まで の 8 進数 。 

16 進数 で 指定 され た 、Latin-1 
の 文字 コー ド に よっ て 表 さ れ た 文 
字 。 XX は 、00 か ら FF ま で の ら 
つの 16 進数 。 
Unicode の 文字 コー ド に よっ て 
表 さ れ た 文字 。 XXXX は 、4 つ の 
16 進 数 。 

(ユニ コー ド エ ス ケー プシ ー ク ェ エンス) 
レル / 

バー ティ カル タブ 
フォ ー ム フィ ー ド 
スペ ー ス 
ライ ン フ ィ ー ド 
キャ リッ ジリ ター ン 
バッ クス ペー ス 

ホリ ゾン タル タブ 











ダブ ルク オォ ー テ ーション 
シン グル クォーテーション 
バッ クス ペー ス 





数 値 

・ 整 数 

8 進数 、10 進数 、16 進数 が 使え ます 。 

8 進数 は 0 か ら 始 まる 0 か ら 7 ま で で 表す 数 値 の こ 
と を 、10 進 数 は 0 以外 か ら 始 まる 0 か ら 9 ま で で 
表す 数 値 の こと を 、16 進数 は 0x か ら 始 まる 0 か ら 
9 まで の 数 値 と 、 そ れ に 続く a か ら f、 あ る い は A 
か ら F ま で の アル ファ ベッ ト で 表す 数 値 の こと を 
いい ます 。 


【 例 】 0514 , 156 , 0x11 


"浮動 少数 点数 
小数 点 を ビリ オド (.) で 表わし た 10 進数 、 ま た は e 
ある い は E を 使用 する 指数 が 使え ます 。 


【 例 】 3.14 , 1.79E+308 


論理 値 
値 を 比較 し た 時 、 そ の 比較 が 論理 的 に 考え て 正 し 
いか どう か の 値 で す 。 
正しけれ ば 「 真 ]」 と な り 、 正 し く な い 場 合 は 「 偽 」 と 
な り ま す 。 た と えば [1==1」 は 正しい の で 「 真 」 と な 
り 、「1==2] は 正しく な い の で 「 偽 」 と な り ま す (|== 
に 関し て は 、 右 ペー ジ を 参照 し て くだ さい )。 
真 の 値 
偽 の 値 


null 値 
プロ パテ ィ な ど に 値 が 定義 され て いな か っ た り 、 
何 も 設定 され て いな い 状 態 を 表し ます 。 

未定 義 。 何 も 設定 され て いな い 状 態 


ま て 1 


隊 NNY 仙 咽 


JavaScript で 使用 で きる 値 の 計算 や 、 比 較 な ど に 用 いる 記号 は 、 次 の 通り で す 。 


代入 演算 子 
右辺 の 値 を 左辺 に 代入 する 注 算 子 。 


算術 演算 子 

算術 演算 を する た め の 演算 子 。 
変数 に 値 を 代入 する 
四 

減算 また は 負 の 値 を 表す 
邊 

除算 

条 除 や 除算 で 余り を 求め る 
値 を 1 増やす (イン クリ メン ト ) 
値 め ら 1 引 く ( デ ク リ メ ン ト ) 











イン クリ メン ト や デ ク リ メン ト の 用 法 は 、 次 の 通 
り で す 。 







y に 値 を 代入 し て か ら x に 1 を 加え る 
y に 値 を 代入 し て か ら x か ら 1 引く 
X に 1 加え て か ら y に 値 を 代入 する 
X か ら 1 引い て か ら y に 値 を 代入 する 







比較 演算 子 


左辺 と 右辺 の 値 を 比較 し て 、 真 の 時 は 「rue」 の 値 






を 、 偽 の 時 は 「false」 の 値 を 返す 。 
x は y と 等 し い 
x と y と は 等 し く な い 

x は y よ り 小 さい 

x は y よ り 小 さい が 等 し い 
x は y よ り 大 きい 
x は y よ り 大 きい が 等 し い 












(JavaScript1.3) 

x は y と 等 し い 。 形 の 変更 を 行わ 
な い 

x と y と は 等 し く な い 。 形 の 変更 
を 行わ な い 






論理 演算 子 
左辺 と 右辺 の 論理 演算 し 、 真 の 時 は 「true」 の 偽 の 
時 は 「false」 の 値 を 返す 。 

AND(x か つ y) 


OR(x ま た は y) 
NOT(x は y で な い ) 









左辺 に 右辺 の 値 を 加算 し 結果 を 左 
辺 に 代入 (x=x+y と 同じ ) 

左辺 に 右辺 の 値 を 減算 し 結果 を 左 
辺 に 代入 (x=x-y と 同じ ) 

左辺 に 右辺 の 値 を 乗算 し 結果 を 左 
辺 に 代入 (x=x*y と 同じ ) 

左辺 に 右辺 の 値 を 除算 し 結果 を 左 
辺 に 代入 (x=x/y と 同じ ) 

左辺 に 右辺 の 値 を 除算 し 奈 り を 左 
辺 に 代入 (x=x96y と 同じ ) 


























文字 列 演算 子 
文字 列 の 連結 を 行う 演算 子 
「 文 字 列 AJ と 「 文 字 別 B」 を 連結 


する 
a の 後に 「 文 字 列 ] を 追加 する 


ピッ ト 演 算 子 

値 を ビッ ト 単 位 で 演算 する 。 

コン ピュ ー タ は 、 文 字 列 も 数 値 も すべ て ビッ ト 単 
位 (2 進数 ) で 処理 し て いま す 。 ビ ッ ト 演 算 子 は 、 値 
を コン ピュ ー タ と 同じ よう に 、 ビ ッ ト 単 位 で 取り 
扱う 演算 子 で す 。 





















ビッ ト の 反転 

ビット の 論理 積 (AND) 

ビッ ト の 論理 和 (OR) 

ビ ピット の 排他 的 和 (XOR) 
ビット の 左 シ フト 

ビッ ト の 右 シ フト 

ビ ピット の 論理 右 シフ ト 

ビッ ト ご と の 左 シ フト の 代入 
ビッ ト ご と の 右 シ フト の 代入 
論理 右 シ フト の 代入 


カッ コ と その 他 

式 や 値 を 括 あ カッ コ や ヤ や 、 オ プ ジ ェ クト や メソ ッ ド 

を 区 切る ビリ オド な ども 演算 子 で す 。 
配列 の 添 番 を 括る 












値 や 数 式 を 括る 

オブ ジェ クト 、 プ ロ パ ティ 、 メ 
ソ ッ ド を 区 切る 

コン マ の 両方 の 値 や 数 式 を 評価 する 


neW 演算 子 
オプ ジェ クト の 作成 (イン スタ ンス の 作成 ) を 行う 
演算 子 。 


【 例 】 

<SCript 1anguage= "JavaScript"> 

く !-ー 

NewDay = new Date("may 2, 1997 23: 
00:00"): < 
document .write (NewDay ) 

document .write( "<br>" ) : 

NewDay . setDate ( 23) : 

document .write (NewDay) 

//-ー テ > 


</ script> 


this 演算 子 
this( キ ー ワ ー ド ) の 後に 指定 し た オプ ジェ クト の 参 
照 を 行う 演算 子 。 
オプ ジェ クト は 、 継 承 関係 を 気 に す る こと な く 、 
直接 指定 で きま す 。 


【 例 

<script 1anguage= "JavaScript"> 

ツル ーー 

function Namae(n) { alert(" 入 力 さ れ た 
名 前 は "+n+" は で す ! !") } 由 
//--> 

</ gcript> 

名 前 を 入力 し て くだ さい <br> 

<fForm name="namae"> 

<1nput type="Text" name="namae" on 
Blur="Namae (this .value ) " value=" っ 
</ form> 


条件 演算 子 
条件 式 が 真 (tme) の 時 と 偽 (Rse) の 時 で 、 違 っ た 処 
理 を 行う 演算 子 。 


条件 式 を 評価 し て 、 真 (true) の 時 
は x の 値 を 、 偽 (false) の 時 は y 
の 値 を 参照 する 


typeof() 演 算 子 
(JavaScript1.1) 

数 値 、 文 字 列 、 変 数 、 オ プ ジ ェ クト な どの 型 ( タ イ 
プ ) を 調べ る 演算 子 。 





【 例 】 

Var suuz1i = 123: 

var moz1 = "今日 は ": 

Var kye = nu]1: 

var today = new Date() : 

Var kan = blur: 
document .write (typeof (suuz1) + "<br 
LM 1 4 
document .write(typeof (moz1i) + "<br> 
0 < 
document .write (typeof (kye) + "<br>" 

) : < 
document .write(typeof (today) + "<br 
gl 人) 記 
document .write (typeof (kan) + "<br>『 

) : 2 
document . write (typeof (muimi ) ) : 


void() 演 算 子 (JavaScript1.1) 
値 を 返さ ず に 式 を 評価 する 演算 子 。 


【 例 】 

<a href="]avascript : vo1d (Kansuu ( ) ) 
"> この 文字 を クリ ッ ク す る と Kansuu ( ) 2 を し ま | 
す </a> 


delete 演算 子 (JavaScript1.2) 
指定 し た オプ ジェ クト 、 プ ロ パ ティ 、 配列 の 要素 
の 削除 を 行う 演算 子 。 

[delete」 の 処理 が 正常 に 行わ れ た 場合 は 「undefined] 
と 「tue」 の 値 を 返し 、 そ う で な けれ ば 「false」 の 値 を 
返し ます 。 


【 例 】 で は 「delete 演算 子 を 使っ て 「hairetu[2]」 の 配列 
の 要素 を 削除 し て いる の で 、「document.write)」 で 
書き 出さ れ た 結果 は 「0 番 目 /1 番目 /3 番目] と な り 
ます 。 


【 例 】 

<gCript 1anguage="JavaSoript1 .2"> 

る 3 ニー 

hairetu= new Array( "0 番目 " , "1 番目 " , 革 り 
番目 " , "3 番目" ) : 

delete hairetu[2] 

document .write(hairetu.]oin("/") ) : 
7( ら = あ 

</ Script> 


in 演算 子 (JavaScript1.4) 

オプ ジェ クト 内 に 指定 し た 値 が 含ま れ て いる か ど 
うか を 調べ る 演算 子 。 

値 が 含ま れ て いる 場合 は 、 真 (rue) を 返す 。 


instanceof 演算 子 
(JavaScript1.4) 

オプ ジェ クト の タイ プ を 調べ る 演算 子 。 

オプ ジェ クト が 指定 し た オプ ジェ クト タイ プ の 場 
合 は 、 真 (tme) を 返す 。 


【 例 】 

co1or1=new String("red" ) : 

co1or1 instanceof String: // true が 返る 
col1or2="cora1": 

color2 instanceof String: // col1or 

は string オプ ジェ クト で は な い の で fa1se が 返る < 


function 演算 子 
(JavaScript1.5) 
関数 の 定義 を 行う 演算 子 。 


演算 子 の 優先 順位 

それ ぞ れ の 演算 子 に は 優先 順位 が あり ます 。 
上 に 行く ほど 優先 順位 が 高く な り ま す 。 

間 

0 new 

!-- キ + ォ オー typeof void delete 

*/⑳ 

くく >> >>> 

く <= ッ >>= in instanceof 


ニニ - 王 *ー / ニ 9%= <<= >> ニ = >>>= = 人 = リー 





AV で きこ 


文字 列 型 と 数 値 型 の 取り 扱い に つい て 

JavaScript の 文字 列 型 と 数 値 型 の 区 別 は 、 非 常に 暖 昧 で す 。 

た と えば 、 次 の スク リプ ト 場 合 は 、 本 当 な ら "2" は 文字 列 型 で 、 ら は 数 値 型 な の で 「false」 に な る は ず な 
の で す が 、JavaScript1. ら 以外 で は 「true」 の 値 を 返し ます 。 





<Script 1anguage= "JavaScript"> 
く ! ーー 

documernt .write("2" == 2) 

の コー 

</ script> 


この 時 に 注意 が 必要 な の は 、JavaScript 1.2 で は 、 文 字 列 型 と 数 値 型 を 明確 に 区 別 す る こと で す 。 
た と えば 、 次 の スク リプ ト 場合 は 「false」 の 値 が 返り ます 。 


<script 1anguage="JavaScript1 .2"> 
く ! ニニ 

document .write("2" == 2) 

7 に こ 

</ Script> 


し か し 、JavaScript1.2 で も 次 の 例 の よう に 文字 列 に -0 を 設定 する と 、 そ の 他 の バー ジョ ン の Java 
Script と 同じ よう に 「true」 の 値 を 返す よう に な り ま す 。 


<script 1anguage="JavaScript1 .2"> 
<! ニ ェ 

document .write( ("2"-0) == 2) 

4 ee 

< く / Scr1pt> 


この よう に 、JavaScript1. ら で 明確 に 区 別 さ れる よう に な っ た 文字 列 型 と 数 値 型 な の で す が 、Java 
Script 1.3 以 降 に な っ て 、 再 びそ れ 以 前 の バー ジョ ン の JavaScript の よう に 区 別 さ れ な く な り ま し た 。 
た と えば 、 次 の スク リブ ト 場 合 は 、JavaScript 1.2 以前 の バー ジョ ン と 同様 に 「true」 の 値 が 返り ます 。 


<8cript 1anguade="JavaScript1 .3"> 
く ! ニー 

document .write("2" == 2) 

3 

< く / Script> 


これ は 、ECMAScript と 仕様 を 合わ せる た めで す 。 

JavaScript1.3 以 降 で JavaScript 1.2 の よう に 文字 列 型 と 数 値 型 を 区 別して 値 を 比較 し た い 時 に は 
JavaScript1.3 で 新た に 追加 され た 演算 子 「 ニ ==」 や 「!-=」 を 使用 し ます 。 

た と えば 、 次 の よう に 値 の 比較 に 「 ニ ==」 を 使用 する と 、JavaScript1. つ の よう に 文字 列 型 と 数 値 型 を 明 
確 に 区 別して 「false」 の 値 が 返り ます 。 


<SCript 1anguage="JavaScript1 .3"> 
< く ! ーー 

document .write("2" === 2) 

5 グー ゴー ニ 

</ SCr1pt> 








JavaScript で 使用 で きる 命令 文 は 、 次 の 通り で す 。 


コメ ント 

JavaScript 内 に コメ ント を 書く 時 に 使用 し ます 。 
[/| は それ 以降 の 1 行 が 、「/* ー */] は 間 に 挟ま れ 
た 文字 列 が 、 コ メン ト と し て 扱わ れ ま す 。 


【 例 ] 
// こ の 1 行 は コメ ント と な り ま す 。 


/* これ に 囲ま れ て いる 部 分 は 
コメ ント と な り ま す 。 * / 


ルー プ か ら 抜 ける 「break」 
「for」 や 「while] な ど で 、 繰 り 返 し (ルー プ ) 処 理 を 
行っ て いる 時 に 使用 し ます 。 

「 条 件 式 」 が 真 (true) の 時 は 、1 番 内 側 の ルー プ を 抜 
け ま す 。 


【 例 ) 
for (1=1: 
document .write ("この 文章 を 10 
し ます :" "回目 ") : 
1f (1== 
break: 


document .write(" で も . . 


1<=10: 1++) ( 


+ ュ 1+ 


so SE > 

} 

document .write("<br>break が ある の で 5 回 

で ルー プ を 抜け ます <br>" ) : 同 


コメ ント を 使用 する 時 の 注意 


JavaScript の 命令 文 ( ス 





処理 の スキ ッ プ 「continue」 
「for」 や 「while」 な ど で 、 繰 り 返 し (ルー プ ) 処 理 を 
行っ て いる 時 に 使用 し ます 。 

「 条 件 式 ] が 真 (rue) の 時 、「continue」 以 下 の 処理 を 
飛ば し て 、 繰 り 返 し 処理 を 続け ます 。 


【 例 】 

for (i=1: 1<=10: 1++) ( 
1f (==5) : 
continue: 

document .write ("この 文章 を 10 

し ます :" +i+ "回 目 で も . . 

} 

document .write( "<br>continue が ある の 

で 5 回 目 が あり ませ ん <br>" ) : 2 


ro SDY>") > 


繰り 返し 処理 「for」 
「 条 件 式 」 が 真 (ue) の 間 、「 処 理 」 を 繰り 返し 行い 
ます 。 


【 例 】 
for (=1, 1<=4: i++) 【 
document .write( "この 文章 を 4 回 書き 出 
し ます :" +1+ "回 目 <br>" ) : 4 
} 


JavaScript 内 で 「<!-HTML の コメ ント ->] を 使っ て も 、 エ ラー に は な り ま せん 。 
し か し 、JavaSoript を 無効 に し て いる 、 あ る い は 未 対応 の ブラ ウザ で 見 る と 、 「<-HTML の コメ ント 1 
ー>] 以下 の ソー スコ ー ド が 、 隠 され ず に 丸見え に な っ て し まい ます 。 














プロ パテ ィ 、 メ ソ ッ ド の 一 覧 
「for.…in」 

「 オ プ ジ ェ クト 内 の プロ パテ ィ ・ メ ソ ッ ド を 「 変 数 | 
に 代入 し な が ら 順 番 に 取り 出し ます 。 


【 例 】 
for (var n in navigator) { 
document .write(n, "<br>" ) : 


} 


関数 の 設定 「function」 

JavaScript で は 、 一 定 の 処理 手続 き を 「 関 数 ] と し て 
設定 する こと が で きま す 。 
「function」 の 後に 「 関 数 名 ] と その 「 処 理 ] を 記述 し 、 
ペー ジ が 読み 込ま れ た タイ ミン グ や 、 イ ベン ト ハ ン 
ドラ に よっ て イベ ント が 発生 し た タイ ミン グ で 、 | 関 
数 名 ] を 呼ぶ こと に よっ て 「 処 理 」 が 実行 され ます 。 
通常 、 関 数 の 設定 は 、HTML ファ イル の <head> 一 
head> 内 で 行い ます 。 こ れ は 、 関 数 が 設定 され 
る 前 に 、<body> </body> 内 で 設定 する 「 関 数 名 」 
が 呼ば れる の を 防ぐ た めで す 。 


【 例 】 

function kansuu(x,y) { 
document.write( x +" 足 す "+ ォ ッ キ J 

"は " + eva1 (x+y) +" で す ") : 

} 

kansuu (1,2): 


条件 分 岐 「if」 

「 条 件 式 ] が 真 (rue) の 時 は 「 処 理 1] を 行い 、 そ れ 以 
外 の 時 は 「 処 理 2] を 行い ます 。 

「else」 の 処理 が な い 時 は 省略 可能 で す 。 


【 例 】 
Var now = new Date() : 


Var AMPM = now.gqetHours ( ) : 


if (AMPM < 12 ){ 1 
("生前 ") } 
else { OR 


値 の 代入 「var」 

変数 、 配 列 、 オ プ ジ ェ クト な どの 宣言 を 行い ます 。 
= 値 ] を 設定 すれ ば 、「var 名] に その 値 が 代入 され 
ます 。 


【 例 】 

Var ataiA =5: 

Var ataiB =3: 

Yar ataiC =" 足 す ": 

document .write( ataiA + ataiC + ata 
1B + "は " + eva1 (ataiA+ataiB) re | 
と 


繰り 返し 処理 「while」 
「 条 件 式 」 が 真 (tme) の 間 、「 処 理 ] を 繰り 返し 行 い 
ます 。 


【 例 】 
var i =1 
while (i<=4 ) { 
document .write ( "この 文章 を 4 2 
し ます :" + ュ + "回 目 <br>") : 
ュ ++: 


} 


オブ ジェ クト の 省略 「with」 

「 オ プ ジ ェ クト 」 で 指定 し た オプ ジェ クト を 省略 し 
て 、 プ ロ パ ティ や メソ ッ ド を 使用 で きる よう に し 
ます 。 


【 例 】 
with (document) ( 
write ( "この 文章 は 、document の <br>" ) 


write( "部 分 を 省略 し て いま す 。<br>" ) 
} 


戻り 値 を 返す 「return」 
命令 文 内 で 値 を 返す 時 に 使用 し ます 。 
返す 値 が な い 時 は 不要 で す 。 


【 例 

<a href=" . ./../home.htm1" onMouse 
Over="window.status=' ス テー タス 行 に 
メッ セー ジ が 出 ま す ! : return true"> こ の 文 
字 の 上 に マウ スカ ー ソ ル を 持っ て くる と </a> 


配列 の 作成 

[function MakeArray(n) か ら 「retum this :] まで 
の 処理 で 配列 の 要素 を 入れ る 器 を 作り 、「 要 素 名 = 
new MakeArray( 要 素数 ) :] 以 下 で 配列 の 要素 を 流し 
込み 、 配 列 を 作成 し ます 。 

作成 され た 配列 は 、「 要 素 名 [ 添 番 ]] で 希望 の 要素 
を 取り 出す こと が で きま す 。 

Netscape Navigator 3.0 で 対応 し た JavaScripl.1 か 
ら は 、 配 列 を 扱う Aray オプ ジェ クト が 追加 され 、 
も っ と 簡単 に 配列 を 作成 で きる よう に な り ま し た 。 
また 、Array オ プ ジ ェ クト の 一 部 の 機能 は 、 
Netscape Navigator 2.0 で も 使用 可能 で す 。 詳 し く 
は 、「Array オプ ジェ クト ](P.562 一 ) を 参考 に し て 
くだ さい 。 

【 例 】 は 、[Date オプ ジェ クト 」 の 「 曜 日 を 表示 する 」 
(P.502) の サン プル を 、 配 列 を 使っ て 書き 直し た も 
の で す 。 





【 例 】 

<htm1l> 

<head> 

<tit1e>ARRAY_SAMPLE 1</it]e> 

<Script type="text/]avascr1pt 上 "> 

ベ ま ニュ 

function MakeArray(n) 【 
this.1ength =nz: 
for (Var 1 = 

this[1i] = 0: 

} 


return this : 


0 1 <= nz 1++) 【{ 


} 
youbi = new MakeArray(7) : 


youbi[0] = "日 ": 
youbi[1] = "月 ": 
youbi [2] = " 全 ": 
youb1 [3] = " 水 ": 
youbi [4] = " 木 ": 
youbi [5] = " 金 ": 
youbiit6l = * 生 5 


function gety (y) { document .write( 2 
youbi[y] ) } 

ん / こ = と 

</ SCr1Dt> 

</head> 

<body> 

* 配列 を 使っ た 曜日 表示 <p> 

( 

<SCript type="text/]avascript"> 
らら 

day = new Date() 

gety (day . getDay ( ) ) : 

ニース 

</ script> 

) 

</body> 

</htm1> 


HTML を 配列 と し て 扱う 

リン ク や フォ ー ム な どの HTML の タグ は 、Java 
Script の オプ ジェ クト と し て 取り 扱え る の と 同時 
に 、 配列 の 要素 と し て も 取り 扱え ます 。 








HTML ファ イル に 記述 され て いる 、 そ れ ぞ れ の オプ 
ジェ クト の 上 か ら 、 添 番 が [O][I][2].…. と な る 配列 の 
要素 が 作成 され ます 。 そ れ ら の 要素 は 、「 オ プ ジ ェ 
クト の 配列 名 [ 添 番 ]] で 取り 扱う こと が で きま す 。 


【 オ ブ ジ ェクト の 配列 名 】 

anchors, applets、 elements、 embeds、 forms、 frames。 

history、 images、 layers、 links、 mineTypes. options、 

Plugins 

※ 各 配列 に は 、 配 列 の 数 を 持っ た length プロ パテ ィ が あ 
り ま す 。 


【 例 

<htm1> 

<head> 

<tit1e>ARRAY_SAMPLE 2</tit1]e> 

<scr1pt type="text/]aVascr1pt"> 

に 

function arr() { 
document . forms [0] .elements[0] 9 

alue= "Form の elements 配 列 [0] の 要素 " 
document . forms [0] .elements [1] の 

alue= "form の elements 配 列 [1] の 要素 " 
document . forms [0] .elements[2] 了 

alue = "form の elements 配 列 [2] の 要素 " 
document . forms [0] .elements[3] | 

alue = "form の elements 配 列 [3] の 要素 " : 

} 

//-ー> 

< く / SCr1D キ > 

</head> 

<body onLoad="arr( ) "> 

*HTML, を 配列 と し て 捉え る <p> 

<Eorm name="ARRAY" > 

<1input type="text" name="array1" 

ze=40> 

< く br> 

<input type="text" name="array1" 5 

ze=40> 

く b エ > 

<1nput type="Eext" name="array1" 


8 


ze=40> 


<b エ > 

<1nput type="tex" name="array1" で 
ze=40> 

</ form> 

</body> 

</htm1> 


ラベ ル (JavaScript1.2 ^) 

式 に ラベ ル を 設定 し て お く こ と に より 、 文 や for 
文 、while 文 の よう な ルー プ 文 か ら 「break」 や 
「continue」 で 抜け る 時 、 ラ ベル 名 を 指定 し て 明示 的 
に 抜け る 場所 を 設定 する こと が で きま す 。 

【 例 】 で は 、 ま ず 変 数 [i] に 「4」 の 値 を 、 変 数 [j」 に 「2] 
の 値 を 代入 し て いま す 。 そ し て 、 ラ ベル 名 で 
「checkiandj」 と 名 前 を 付け た 王 文 の 処理 と 、 ラ ベル 
名 で 「checkj」 と 名 前 を 付け た if 文 の 処理 を 用 意 し 
て いま す 。 変数 k」 の 値 が 1」 の 時 は 、 条 件 式 Ik==1」 
が 真 (true) と な り 、「break checkj」 で 「checkj」 の 処理 
を 抜け る た め 、 そ の 下 の [i] と 変数 [j] の 合計 を 出す 
処理 を 行なわ ず に [ij] が 実行 され ます 。「k」 の 値 が 
以外 の 時 は 、「 衣 と 「 串 の 合計 を 出し た 後に 「break 
checkiandj] で 「checkiandj」 の 処理 を 抜け る た め 、- 
j] の 処理 は 実行 きれ ませ ん 。 





【 例 】 
Var 1=4: 
Var ]=2: 
checkiand] : 
if (4==1) { 
document .write ( "k の 値 は "+ k+" 
・<br>" ) : 2 
document .write ("1 の 値 は " + 1 
+ ".<br>") : < 
check] : 
if (2==}) 【 
document .write("] 1 
備 は " よ ゴ "ScDEz1 : 
if (1==k) { 6 
ak check] } 


document .write("3 の 
} の 合計 " + (1+]) + 


break checkiand] : 


『 


*。 く Dr>*) : 


} 
document .write(1 + "ー" 
ず "9 す .( 員 = こ 30 エリ 。 で Drz"): 


} 


繰り 返し 処理 「do while」 
(JavaScript1.2 て ) 

do while 文 は 、 条 件 式 が 偽 (false) に な る まで 、 処 
理 を 繰り 返し 行なう よう な 場合 に 使用 し ます 。 

【 例 】 で は 、「i<10」 が 偽 (false) に な る まで 、i に 1 を 
加え な が ら 書 き 出し て いま す 。 


【 例 】 

Var 1i=0: 

do { 
ュ +=1 
document .write (1, "<br>" ) 
) while (1<10) 


スイ ッ チ 「switch] 
(JavaScript1.2 <) 

switch 文 は 、 処 理 に ラベ ル を 設定 し 、 各 ラベ ル と 
値 を 参照 し て 真 (rue) に な る 処理 を 実行 し ます 。 こ 
の 時 、 も し ゃ 真 (tme) に な る ラベ ル が な いり 場合 は 、 
「defaul」 の 処理 を 実行 し ます 。 

【 例 】 で は 、 変数 i」 の 値 が [Oranges」 の 時 は 「 オ レン 
ジ は 1 個 100 円 で す 。」 と いう 文字 が 、「Apples」 の 
時 は 「 り ん ご は 1 個 150 円 で す 。] と いう 文字 が 、 
document オ プ ジ ェ クト の 「write0」 メ ソ ッ ド に よっ 
て 書き 出さ れ ま す 。 ま た 、[i] の 値 が 「Oranges」 で 
も 「Apples」 で も な い 場 合 は 、「defaul:」 で 設定 し た 、 
13 行 目 の 「 申 し 訳 あ り ま せん 。 た だ いま 品切れ で 
す 。] と いう 文字 を 書き 出さ れ ま す 。 








【 例 】 
switch (1) { 


case "OrangeSs' : 


document . write ("オレ ンジ は 1 le 
100 円 で す 。 <br>" ) : 
break: 
case "Apples' : 
document .write(" り ん ご は 1 私 
0 円 で す 。 <br>") : 
break: 
defau]t: 
document .write( 7 
ん 。 た だ いま 品切れ で す 。" ) : 
} 
document . write ( "な お 、 MR 
まれ て お り ま せん 。 <br>" ) : 


エク スポ ー ト 「export」 
(JavaScript1.2 ぐ て) 

Signed Script が 、 他 の Signed Script ある い は 著名 
な し の スク リプ ト に 、 関 数 ・ プ ロ パ ティ ・ オ プ ジ ェ 
クト の 使用 を 可能 に し ます 。 

通常 、Signed Script 内 の 情報 は 、 同 じ Signed Script 
内 で し か 使用 する こと が で きま せん 。export は 、 こ 
の Signed Script 内 の 情報 を 、 他 の スク リプ ト か ら 
利用 可能 に し ます 。 


エク スポ ー ト する 関数 ・ プ ロ パ 
ティ ・ オ ブ ジ ェクト 

Signed Script 内 の すべ て の 関 
数 ・ プ ロバ ティ ・ オ ブ ジ ェクト 













イン ポー ト 「importl 
(JavaScript1.2 ^) 

スク リプ ト が 、export に より 使用 可能 に な っ た 、 
関数 ・ プ ロ パ ティ ・ オ プ ジ ェ クト の 使用 を 可能 に 


し ます 。 










受け 取る オブ ジェ クト 名 
受け 取る 関数 ・ ブ ロバ ティ - オ ブ 
ジェ クト の リス ト 

エク スポ ー ト され た すべ て の 関 
数 ・ ブ プロ パテ ィ ・ オ ブ ジ ェクト 





[try..….catch」 


例外 の 処理 

(JavaScript1.4 て ) 

試み る 処理 の プロ ッ ク を マー ク し ます 。 try の 処理 
か ら 例外 が 投げ られ た 時 に は 、catch で 設定 し た 処 
理 が 行わ れ ま す 。 





【 例 】 
try ( 
throw "例外 が 発生 し た よ !!" 2 
し ます 
} 
catch (e) { 

/ / 例 外 時 の 処理 
1ogMyErrors (e) // 別 の 部 分 で 設定 し た エ 還 
ラー 処理 へ 
} 


例外 の 値 を 投げ る 「throw」 
(JavaScript1.4 て ) 
ユー ザー 定義 の 例外 の 値 を 投げ ます 。 


【 例 】 

throw "Error2" : 人 
外 を 生成 し ます 

throw 42: //42 の 値 を 持っ た 例外 を 生成 し ます 
throw true: //Erue TS 
成 し ま す 


定数 を 宣言 する 「const」 
(JavaScript1.5 て ) 
読み 出し 専用 の 定数 を 宣言 し ます 。 


【 例 】 
const a = 10: 
document .write( "定数 10 は "+a) 








ユー ザー や スク リプ ト に よっ て ペー ジ が ロー ド さ れ た り 、 オ プ ジ ェ クト が クリ ッ ク さ れ た り と いう よ 
うな 、 特 定 の 動作 が 起こ っ た タイ ミン グ を イベ ント と いい ます 。 JavaScript で は 、 イ ベン ト の 発生 を 取 
得 し 、 そ の タイ ミン グ で スク リプ ト の 実行 を 開始 する こと が で きま す 。 こ の イベ ント の 取得 を 行う 指定 


を 、 イ ベン ト ハ ンド ラ と いい ます 。 


イベ ント ハン ドラ の 設定 は 、 そ の イベ ント ハン ドラ が 設定 可能 な オプ ジェ クト の HTML タ グ 内 に 設定 


する こと に よっ て 行い ます 。 


JavaScript で 用 意 さ れ て いる イベ ント ハン ドラ と 、 そ の イベ ント ハン ドラ が どの よう な イベ ント を 取 
得 し 、 ど の オプ ジェ クト に 対応 し て いる か は 、 次 の 通り で す 。 


onAbort(JavaScript1.1 て ) 
画像 の 読み 込み が キャ ン セ ル さ れ た 時 の イベ ント 
を 取得 する イベ ント ハン ドラ 。 

画像 が 読み 込ま れ て いる 途中 に 、 プ ラウ ザ の スト ッ 
プ ボ タン を 押す な どの 動作 で 、 画 像 の 読み 込み が 
キャ ン セ モル され た 時 を イベ ント と し て 取得 し 、 設 
定 し た 処理 を 実行 し ます 。 

JavaScript1.1 か ら の イベ ント ハン ドラ で す 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScriptl.1) 
Image オプ ジェ クト 


onBlur(JavaScript1.0 ^) 

フォ ー カ ス が フォ ー ム や ウィ ンド ウ か ら 離 れ た 時 
の イベ ント を 取得 する イベ ント ハン ドラ 。 

Text フ ォ ー ム な ど で マ ウス カー ソル が 点 減 し て い 
た り 、Radio フ ォ ー ム や Checkbox フォ ー ム が 
チェ ッ ク さ れ て いた り 、 ウ ィ ン ド ウ が アク ティ ブ 
に な っ て いる な どの 状態 が 、 フ ォ ー カ ス が ある 状 
態 に な り ま す 。 

フォ ー ム を 移動 し た り 、 フ ォ ー カ ス が ある ウィ ン 
ドウ と は 別 ウ ィ ン ド ウ を クリ ッ ク す る こと な ど で 、 
フォ ー カ ス が 移動 し た 時 を イベ ント と し て 取得 し 、 
設定 し た 処理 を 実行 し ます 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScript1.0) 

Select オプ ジェ クト 

Text オ プ ジ ェ クト 

Textarea オプ ジェ クト 


(JavaScriptl.1) 

Burton オプ ジェ クト 
Checkbox オプ ジェ クト 
FileUpload オプ ジェ クト 
Frame オプ ジェ クト 
Password オプ ジェ クト 
Radio オプ ジェ クト 
Reset オプ ジェ クト 
Submit オプ ジェ クト 
window オプ ジェ クト 


onChange(JavaScript1.0 ^) 
フォ ー ム の 内 容 に 変化 が あり 、 フ ォ ー カ ス が フォ ー 
ム か ら 離 れ た 時 の イベ ント を 取得 する イベ ント ハ 
の ドラ 。 

Text フォ ー ム の 内 容 を 変更 し 、 他 の フォ ー ム に 移 
動 す る こと な ど で 、 フ ォ ー カ ス が 移動 し た 時 を イ 
ペン ト と し て 取得 し 、 設 定 し た 処理 を 実行 し ます 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScriptl.0) 
Select オ プ ジ ェ クト 

Text オプ ジェ クト 

Textarea オプ ジェ クト 


(JavaScriptl.1) 
FileUpload オプ ジェ クト 


onClick(JavaScript1.0 ~) 
ボタ ン や ヤリ ンク を クリ ッ ク し た 時 の イベ ント を 取 
得する イベ ント ハン ドラ 。 

Button フォ ー ム や リン ク を クリ ッ ク し た 時 を イベ 
ント と し て 取得 し 、 設 定 し た 処理 を 実行 し ます 。 








JavaScriptl.1 か ら 「retum false」 と |false」 を 返す と 、 
リン ク の 参照 な どの 通常 動作 を 中 止 で きる よう に 
な り ま し た 。 こ れ に より 、 リ ンク に この イベ ント 
ハン ドラ を 設定 し て 、JavaScript の 処理 の 1 番 最後 
に 「retum false」 を 返す よう に 設定 する こと に よっ 
て 、 リ ンク を クリ ッ ク し て も JavaScript の み を 実 
行 し 、 別 ペー ジ に 移動 する な どの リン ク の 処理 を 
行わ な ね いよ うに する こと が で きま す 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScript1.0) 

Button オプ ジェ クト 
Checkbox オプ ジェ クト 
Link オプ ジ ェクト 

Radio オプ ジェ クト 

Reset オプ ジェ クト 

Submit オプ ジェ クト 


onError(JavaScript1.1 ^) 
ペー ジ や 画像 の 読み 込み エラ ー が 発生 し た 時 の イ 
ベン ト を 取得 する イベ ント ハン ドラ 。 

画像 読み 込み 時 に 、 リ ンク 切れ な ど で 画 像 の 読み 
込み が うま く 行 われ な か っ た 時 を イベ ント と し て 
取得 し 、 設 定 し た 処理 を 実行 し ます 。 
JavaScriptl.1 か ら の イベ ント ハン ドラ で す 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScriptl.1) 

Image オプ ジェ クト 
window オプ ジェ クト 


onFocus(JavaScript1.0 ~) 
フォ ー カ ス が フォ ー ム や ウィ ンド ウ に 与え られ た 
時 の イベ ント を 取得 する イベ ント ハン ドラ 。 

フォ ー ム を 移動 し た り 、 フ ォ ー カ ス が な い ウ ィ ン 
ドウ を クリ ッ ク す る な ど で フ ォ ー カ ス が 移動 し た 
時 を イベ ント と し て 取得 し 、 設 定 し た 処理 を 実生 
し ます 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScriptl.0) 

Select オ プ ジ ェ クト 

Text オ プ ジ ェ クト 
Textarea オ プ ジ ェ クト 


(JavaScriptl.1 ) 

Button オ プ ジ ェ クト 
Checkbox オプ ジェ クト 
FileUpload オプ ジェ クト 
Frame オプ ジェ クト 
Password オプ ジェ クト 
Radio オプ ジェ クト 
Reset オプ ジェ クト 
Submit オプ ジ ェクト 
window オプ ジェ クト 


onLoad(JavaScript1.0 ~) 
ペー ジ や 画像 が 読み 込ま れ た 時 の イベ ント を 取得 
する イベ ント ハン ドラ 。 

ペー ジ や 画像 の 読み 込み が 終了 し た 時 を イベ ント 
と し て 取得 し 、 設 定 し た 処理 を 実行 し ます 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScript1.0) 
window オプ ジェ クト 


(JavaScriptl.1) 
Image オプ ジェ クト 


onMouseOut 
(JavaScript1.1 ~) 

マウ ス が 指定 され た 領域 か ら 離 れ た 時 の イベ ント 
を 取得 する イベ ント ハン ドラ 。 

リン ク に 設定 する こと に よっ て 、 マ ウス カー ソル 
が リン ク か ら 離 れ た 時 を イベ ント と し て 取得 し 、 
設定 し た 処理 を 実行 し ます 。 
JavaScriptl.1 か ら の イベ ント ハン ドラ で す 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScript1.1) 
Link オプ ジェ クト 
Area オプ ジェ クト 


onMouseOver 
(JavaScript1.0 ~) 

マウ ス が 指定 され た 領域 内 に 入っ た 時 の イベ ント 
を 取得 する イベ ント ハン ドラ 。 

リン ク に 設定 する こと に よっ て 、 マ ウス カー ソル 
が リン ク 上 に 乗っ た 時 を イベ ント と し て 取得 し 、 
設定 し た 処理 を 実行 し ます 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScriptl.0) 
Link オプ ジェ クト 


(JavaScriptl.1) 
Area オプ ジェ クト 


onReset(JavaScript1.1 て ) 
フォ ー ム が リセ ッ ト さ れ た 時 の イベ ント を 取得 す 
る イベ ント ハン ドラ 。 

Reset フォ ー ム が 押さ れる な ど で 、 フ ォ ー ム の 内 容 
が リセ ッ ト さ れ た 時 を イベ ント と し て 取得 し 、 設 
定 し た 処理 を 実行 し ます 。 

JavaScriptl.1 か ら の イベ ント ハン ドラ で す 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScriptl.1) 
Form オプ ジェ クト 


onSelect(JavaScript1.0 ぐ て) 
フォ ー ム の テキ スト 領域 が 選択 され た 時 の イベ ン 
ト を 取得 する イベ ント ハン ドラ 。 

Text フ ォ ー ム や Textarea フ ォ ー ム が 選択 され 、 
フォ ー ム へ の 入力 が 可能 に な っ た 時 を イベ ント と 
し て 取得 し 、 設 定 し た 処理 を 実行 し ます 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScript1.0) 

Text オ プ ジ ェ クト 
Textarea オプ ジェ クト 


onSubmit(JavaScript1.0 て ) 
フォ ー ム の Submit ボタ ン が 押さ れ た 時 の イベ ント 
を 取得 する イベ ント ハン ドラ 。 

Submit ボタ ン が 押さ きれ 、 フ ォ ー ム の デー タ 送 信 が 開 
始 さ れる 時 を イベ ント と し て 取得 し 、 設定 し た 処理 
を 実行 し ます 。 

デー タ 送 信 の 処理 は JavaScript の 処理 が 終了 する ま 
で 行わ れず 、JavaScript の 処理 で 「return false」 と 
「false」 を 返す と 、 デ ー タ 送信 の 処理 は 中 止 さ れ ま す 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScriptl.0) 
Form オプ ジェ クト 


onUnload(JavaScript1.0 ^) 
別 の ペー ジ に 移動 し た 時 の イベ ント を 取得 する イ 
ペ ベント ハン ドラ 。 

今 の ペー ジ を 抜け て 、 別 ペー ジ に 移動 し た 時 を イ 
ベン ト と し て 取得 し 、 設定 し た 処理 を 実行 し ます 。 


【 利 用 可能 な オブ ジェ クト 】 
(JavaScriptl.0) 
window オプ ジェ クト 











JavaScript1.2 か ら は 、 イ ベン ト を オプ ジェ クト と し て 捕らえ る event オプ ジェ クト が 追加 され まし た 。 
その た め 、 イ ベン ト を 取得 し た い オ プ ジ ェ クト に 対し て イベ ント を 設定 する こと に よっ て 、 そ の オプ 
ジェ クト 上 の どこ で で も イベ ント の 発生 を 取得 する こと が で きる よう に な り ま し た 。 

JavaScript で 設定 で きる イベ ント と 、 そ の イベ ント が 設定 で きる オプ ジェ クト 、 イ ベン ト で 取得 で き 
る 値 、 つ まり event オ プ ジ ェ クト の プロ バテ ィ は 、 次 の 通り で す 。 


Click 

マウ ス が クリ ッ ク さ れ た 時 の イベ ント を 取得 し ます 。 
「MouseDown」 イ ベン ト と 「MouseUp」 イ ベン ト を 合わ 
せ た も の で す 。 


【 利 用 可能 な オブ ジェ クト 】 
Button、Checkbox, Link、 Radio, Reset, Submit 






【event オ ブ ジ ェクト の プロ パテ ィ 】 
「click」 を 値 に 持つ 
イベ ント が 発生 し た 時 の カー ソル 
の X 軸 Y 軸 位 置 を 値 に 持つ 









左 ボ タン の 時 は 「1」 を 、 右 ボタ 
ン の 時 は 「3」 を 値 に 持つ 
修飾 キー の 値 を 持つ 


※button が クリ ッ ク さ きれ て も layerX. layerY、 pageX、 
pageY、screenX.screenY は 値 を 返し ませ ん 。 


DbIClick 

マウ ス が ダ プ ルク リッ ク さ れ た 時 の イベ ント を 取 
得 し ます 。 

Windows と Macintosh で 使用 可能 で す 。 


【 利 用 可能 な オブ ジェ クト 】 
document、 Area、 Link 


【event オブジェ クト の プロ パテ ィ 】 


「dblclick] を 値 に 持つ 
イベ ント が 発生 し た 時 の カー ソル 
の X 軸 Y 電位 置 を 値 に 持つ 









左 ボ タン の 時 は 「1」 を 、 右 ボタ 
ン の 時 は 「3」 を 値 に 持つ 
修飾 キー の 値 を 持つ 


DragDrop 

ウィ ンド ウ 上 に ファ イル や ショ ー ト カッ ト な ど を ド 
ラッ グ & ド ロッ プ し た 時 の イベ ント を 取得 し ます 。 

イベ ント が 発生 し た 時 に 、 真 (tue) を 返せ ば ドラ ッ 
グ & ド ロッ プ を 許し 、 偽 (false) を 返せ ば ドラ ッ ク グ & 
ドロ ッ プ の 動作 を 中 止 し ます 。 

Windows 版 の Netscape Navigator 4.X は 、 画 像 の ド 
ラッ グ & ド ロッ プ に 対応 し て いま せん 。 


【 利 用 可能 な オブ ジェ クト 】 


window 


【event オブ ジェ クト の プロ パテ ィ 】 
「dragdrop」 を 値 に 持つ 


ドロ ッ プ され た ファ イル な どの 
UHL を 返す 





KeyDown 

ユー ザー が キー を 押し た 時 の イベ ント を 取得 し ま 
す 。 

「KeyDownm」 イ ベン ト は 「KeyPress]」 イ ベン ト よ り 前 
に 発生 し 、 も し 「KeyDown」 イ ベン ト が 偽 (false) を 
返し た 時 は 、「KeyPress」 イ ベン ト は 発生 し ませ ん 。 


【 利 用 可能 な オブ ジェ クト 】 
document、 Image、 Link、 Textarea 


【event オ ブ ジ ェクト の プロ パテ ィ 】 





「keydown」 を 値 に 持つ 
イベ ント が 発生 し た 時 の カー ソル 
の X 軸 Y 軸 位 置 を 値 に 持つ 









押さ れ た キー の ASCII の 値 を 持つ 
修飾 キー の 値 を 持つ 


KeyPress 

ユー ザー が キー を 押し た まま の 状態 に し た 時 の イ 
ベン ト を 取得 し ます 。 

「KeyDown]」 イ ベン ト が 真 (rue) の 値 を 返し た 時 の 
み イ ベン ト が 発生 し 、 ユ ー ザ ー が キー を 放す まで 
イベ ント は 発生 し 続け ます 。 


【 利 用 可能 な オブ ジェ クト 】 
document、Image、 Link, Textarea 


【event オ ブ ジ ェクト の プロ パテ ィ 】 
「keypress」 を 値 に 持つ 

イベ ント が 発生 し た 時 の カー ソル 
の X 軸 Y 軸 位 置 を 値 に 持つ 









押さ れ た キー の ASCI| の 値 を 持つ 
修飾 キー の 値 を 持つ 


KeyUp 
ユー ザー が キー を 放し た 時 の イベ ント を 取得 し ます 。 


【 利 用 可能 な オブ ジェ クト 】 
document、 Image、 Link、 Textarea 


【event オ ブ ジ ェクト の プロ パテ ィ 】 
「keyup」 を 値 に 持つ 
イベ ント が 発生 し た 時 の カー ソル 
の X 軸 Y 軸 位 置 を 値 に 持つ 







放さ れ た キー の ASCII の 値 を 持つ 
修飾 キー の 値 を 持つ 


MouseDown 

ユー ザー が マウ ス ボ タ ン を 押し た 時 の イベ ント を 
取得 し ます 。 

も し も ゃ も 「MouseDown」 イ ベン ト が 偽 (false) を 返し た 
時 に は 、 選 択 や ヤリ ンク の 参照 な どの 通常 動作 が 中 
止 き され ま す 。 


【 利 用 可能 な オブ ジェ クト 】 
Button, document、Link 


【event オ ブ ジ ェクト の プロ パテ ィ 】 





「mousedown] を 値 に 持つ 
イベ ント が 発生 し た 時 の カー ソル 
の X 軸 Y 軸 位 置 を 値 に 持つ 








左 ポタ ン の 時 は 「1」 を 、 右 ボタ ン 
の 時 は 「3」 を 値 に 持つ 

イベ ント が 発生 し た 時 に 押さ れ た 
修飾 キ 一 の 値 を 持つ 


MouseMove 

カー ソル が 動い た 時 の イベ ント を 取得 し ます 。 
「captureEvents()] メソ ッ ド で この イベ ント を 取得 
する よう に 設定 し て いる 時 の み 、 こ の イベ ント の 
取得 を 有効 に する こと が で きま す 。 


【 利 用 可能 な オブ ジェ クト 】 
な し 


【event オ ブ ジ ェクト の プロ パテ ィ 】 


「mousemove」 を 値 に 持つ 
イベ ント が 発生 し た 時 の カー ソル 
の X 軸 Y 軸 位 置 を 値 に 持つ 







MouseOut 
オプ ジェ クト か ら マ ウス カー ソル が 離れ た 時 の イ 
ベン ト を 取得 し ます 。 








【 利 用 可能 な オブ ジェ クト 】 
Area, Layer、 Link 


【event オブ ジェ クト の プロ パテ ィ 】 
「mouseout」 を 値 に 持つ 
イベ ント が 発生 し た 時 の カー ソル 
の X 軸 Y 軸 位 置 を 値 に 持つ 











MouseOver 
オプ ジェ クト に カー ソル が 乗っ た 時 の イベ ント を 
取得 し ます 。 


【 利 用 可能 な オブ ジェ クト 】 
Area、 Layer, Link 


【event オ ブ ジ ェクト の プロ パテ ィ 】 
「mouseover」 を 値 に 持つ 
イベ ント が 発生 し た 時 の カー ソル 
の X 軸 Y 軸 位 置 を 値 に 持つ 












MouseUp 

ユー ザー が マウ ス ボ タ ン を 放し た 時 の イベ ント を 
取得 し ます 。 

も し ゃ も 「MouseUp」 イ ベン ト が 偽 (false) を 返し た 時 
に は 、 選 択 や リン ク の 参照 な どの 通常 動作 が 中 止 
され ます 。 


【 利 用 可能 な オブ ジェ クト 】 


Button、 document、Link 





【event オブジェ クト の プロ パテ ィ 】 





「mouseup」 を 値 に 持つ 
イベ ント が 発生 し た 時 の カー ソル 
の X 軸 Y 電位 置 を 値 に 持つ 









左 ボ タン の 時 は 「1」 を 、 右 ボタ ン 
の 時 は 「3」 を 値 に 持つ 

イベ ント が 発生 し た 時 に 押さ れ た 
修飾 キー の 値 を 持つ 


Move 

ユー ザー、 ま た は スク リプ ト に よっ て 、 ウ ィ ン ド 
ウ 、 ま た は フレ ー ム が 動い た 時 の イベ ント を 取得 
し ます 。 


【 利 用 可能 な オブ ジェ クト 】 


window、 Frame 


【event オ ブ ジ ェクト の プロ パテ ィ 】 
「move」 を 値 に 持つ 


ウィ ンド ウ 、 ま た は フレ ー ム の 左 
上 角 の 位置 の 値 を 持つ 





Resize 

ユー ザー、 ま た は スク リプ ト に よっ て 、 ウ ィ ン ド 
ウ 、 ま た は フレ ー ム の サイ ズ が 変更 され た 時 の イ 
ペン ト を 取得 し ます 。 


【event オブ ジェ クト の プロ パテ ィ 】 






「resize」 を 値 に 持つ 
ウィ ンド ウ 、 ま た は フレ ー ム の 幅 
と 高 さ の 値 を 持つ 






l 
navigator オ プ ジ ェ クト 

プラ ウザ の ユー ザー エー ジェ ント や アプ リ ケ ー シ ョ 
ン 名 、 バ パー ジョ ン な ど 、 プ ラウ ザ 固 有 の 情報 を 提 
供する オプ ジェ クト 。 

通常 は サー バー 側 で 行わ れ て いる 、 ユ ー ザ ー エ ー 
ジェ ント な どか ら プ ラウ ザ を 判断 し て 、 そ の プラ 
ウザ に 最適 化 さ きれ た Web ペー ジ を 表示 させ る な ど 
の 処理 を 、 プ ラウ ザ 側 で 行う こと を 可能 に し ます 。 





【 プ ロ パ ティ 】 


(JavaScriptl.0) 








ブラ ウザ の コー ド 名 
ブラ ウザ の ブラ ウザ 名 
ブラ ウザ の バー ジョ ン 
ジラ ウザ の コー ザー エー ジェ エ シ ト 


(JavaScriptl.1) 
MIME タイ プ 配 列 ( オ ブ ジ ェクト ) 
プラ グイ ン 配 列 ( オ ブ ジ ェクト ) 


(JavaScriptl.2) 





ユー ザー が 選択 し た 言 
ユー ザー の ブラット ホ ー ム の タイ ブ 





[メソッド 】 


(JavaScriptl.0) 
呈 SE オブ ジェ クト を な 文字 列 に 変え る 


(JavaScriptl.1) 

Java が 使え る か 

外部 か ら の プロ バテ ィ 参 照 を 許可 
し て いる か どう か 

オブ ジェ クト の 値 を 返す 


(JavaScript1.3) 
預 結 押 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
な し 








mimeTypes オプ ジェ クト (配列 ) 
JavaScript1.1 <) 
プラ ウザ で 使用 で きる 使用 MIME タイ プ の 配列 を 
作成 する 、navigator オプ ジェ クト の プロ パテ ィ 。 








【 プ ロ パ ティ 】 
(JavaScript1.0) 
未 対応 


(JavaScriptl.1) 









MIME タイ プ の 詳細 
プラ グイ ン を 使う た め の 名 前 
MIME タイ プ の 数 
MIME タイ プ の 拡張 子 
MIME タイ プ 名 


【 メ ソ ッ ド 】 
(JavaScriptl.0) 


(JavaScriptl.1) 
巻 


【 イ ベン ト ハ ンド ラ 】 
な し 


りり IL を アル オン 4 品 ( | 





(JavaScript1.1 ~) 

プラ ウザ に イン スト ー ル され て いる 使用 可能 な プ 
ラグ イン の 配列 を 作成 する 、navigator オプ ジェ ク 
ト の プロ パテ ィ 。 











【 プ ロ パ ティ 】 
(JavaScript1.0) 






(JavaScriptl.1) 

プラ グイ ン の 詳細 
プラ グイ ン の ファ イル 名 
ブラ グイ ン の 数 
プラ グイ ン の 名 前 






【 メ ソ ッ ド 】 
(JavaScriptl .0) 
未 対応 


(JavaScriptl.1) 
に ブラ グイ ン 配 列 の リフ レッ シュ 


【 イ ベン ト ハ ンド ラ 】 
な し 
screen オブジェ クト 


(JavaScript1.2 て ) 
ディ スプ レイ に 関す る 情報 を 提供 する オプ ジェ クト 。 


【 プ ロ パ ティ 】 
(JavaScriptl.2) 
















ディ スプ レイ の 幅 ( ビ ピクセル) 
ディ スプ レイ の 高 さ ( ビ ピク セル ) 
タス ク バ ー な どの 部 分 を 除い た 
ディ スプ レイ の 幅 ( ビ ピクセル) 
タス ク バ ー な どの 部 分 を 除い た 
ディ スプ レイ の 高 さ ( ピ クセ ル ) 
ディ スプ ブレ イ 深 度 (bits/pixel) 
ディ スプ レイ 色 深 度 (n ビッ トカ 
ラ つ ) 


【 メ ソ ッ ド 】 
な し 


【 イ ベン ト ハ ンド ラ 】 
な し 







event オ ブ ジ ェクト 
(JavaScript1.2 ^) 

イベ ント の 情報 を 取り 扱う オプ ジェ クト 。 

タグ 内 に 設定 され た イベ ント ハン ドラ か ら だ け で 
な く 、 ウ ィ ン ド ウ 上 の どこ か ら で も イベ ント を 取 
得する こと が で きま す 。 


【 プ ロ パ ティ 】 
(JavaScript1.2) 





イベ ント の タイ プ 

イベ ント が 発生 し た レイ ヤー 上 の 
X 座 標 ( ビ ピク セル) 

イベ ント が 発生 し た レイ ヤー 上 の 
Y 座 標 ( ビ ピク セル ) 

イベ ント が 発生 し た ペー ジ 上 の X 
座標 (ビク セル ) 

イベ ント が 発生 し た ペー ジ 上 の Y 
座標 (ビク セル ) 

イベ ント が 発生 し た ディ スプ レイ 
上 の X 座 標 ( ビ クセ ル ) 

イベ ント が 発生 し た ディ スプ レイ 
上 の Y 座標 (ビク セル ) 

マウ スポ タン が 押さ れ た り 、 押 され 
た キー の ASCII の 値 の 数 字 を 表す 
マウ ス ま た は キー イベ ント 発生 時 
の モデ ィ フ ァ イ キ ー( 修 飾 キ ー) の 
種類 (ALT_MASK, CONTROL_ 
MASK. SHIFT_MASK. META_ 
MASK) 

DragDrop イベ ント 発生 時 の 、 ド 
ロッ プ さ れ た オブ ジェ クト の 
URL 


【 メ ソ ッ ド 】 
な し 


【 イ ベン ト タ イプ 】 
すべ て の イベ ント ハン ドラ お よび イベ ント タイ プ 


window オブ ジェ クト 

プラ ウザ 自身 や 、 ア ラー トウ ィ ン ド ウ な どの 各種 
ダイ アロ グ ボ ックス の 情報 を 提供 し た り 、 操 作 を 
行う オプ ジェ クト 。 

document オ プ ジ ェ クト 、Frame オプ ジェ クト 、 
history オプ ジェ クト 、locaiion オプ ジェ クト な ど 、 
多く の オプ ジェ クト を 含ん で いま す 。 
最上 層 の オプ ジェ クト な の で 「window」 は 省略 可能 
で す が 、「open()」 メ ソ ッ ド や 「close0」 メ ソ ッ ド な ど 、 
他 の オプ ジェ クト と 同じ 名 称 の コマ ンド も ある の 
で 、 混 乱 を 避け る た め に は [window] を 記述 し た ほ 
う が よ いで し ょ う 。 

JavaScript1.2 か ら 、 ウ ィ ン ド ウ 自 身 の サ イズ や 表示 
位置 を 、 よ り 細 か く 設 定 で きる よう に な り ま し た 。 


window.property 
window.method () 
se1f.property 

ethod () 





【 プ ロ パ ティ 】 
(JavaScriptl.0) 


デフ ォ ル ト の ステ ー タ ス 行 の メッ 
m 有 

ウィ ンド ウ 内 の フレ ー ム 数 

ウィ ンド ウ 名 

ウィ ンド ウ 内 の フレ ー ム の 親 フ 
レー ム 

現在 の ウィ ンド ウ 自 身 。 「window] 
と 同じ 

ステ ー タ ス 行 の メッ セー ジ 

] 番手 前 に あわ ある ウィ ンド ウ 
現在 の ウィ ンド ウ 自 身 。「selfl と 
同じ 

document オ ブ ジ ェクト 
Frame オ ブ ジ ェクト お よび 配列 





history オ ブ ジ ェクト お よび 配列 
location オ ブ ジ ェクト 


(JavaScriptl.1) 


ウィ ンド ウ が 閉じ られ て いる 状態 
「open()」 メ ソ ッ ド で 開か れ た 
ウィ ンド ウ か ら 元 の ウィ ンド ウ を 
参照 する 





(JavaScript1.2) 






ウィ ンド ウ の 表示 領域 の 高 さ ( ピ 
クセ ル ) 

ウィ ンド ウ の 表示 領域 の 幅 ( ピ クセ ル ) 
ロケ ーション バー 

ウイ ポジ ンド ウ の メニ ュー バー 
ウィ ンド ウ の 外周 の 高 さ ( ピ クセ ル ) 
ウィ ンド ウ の 外周 の 幅 ( ピ クセ ル ) 
ウィ ンド ウ の X 座 標 の 位置 

ウィ ンド ウ の Y 座 標 の 位置 

ウィ ンド ウ の バ パーソナル バ ー 
ウィ ンド ウ の スク ロー ル バ ー 
ウィ ンド ウ の ステ ー タ スバ ー 
ウィ ンド ウ の ツー ル バ ー 


【 メ ソ ッ ド 】 

(JavaScriptl.0) 

警告 用 ダイ アロ グ ボ ックス を 開く 
「setTimeout0」 メ ソ ッ ド の 停止 
ウィ ンド ウ を 閉じ る 

確認 ボタ ン 付 き ダ イア ログ ボッ ク 
ス を 開く 

新しい ウィ ンド ウ を 開く 

入力 欄 付き の ダイ アロ グ ボ ックス 
を 開く 

ミリ 秒 単位 で 指定 し た 時 間 後 に 実 
行 す る 

オブ ジェ クト を な 文字 列 に 変え る 





(JavaScriptl.1) 

フォ ー カ ス を 移動 する 
フォ ー カ ス を 与え る 
ウィ ンド ウ を スク ロー ル す る 
オブ ジェ クト の 値 を 返す 




















(JavaScript1.2) 





ひと つ 前 の URL に 進む 
外部 か ら の イベ ント キャ プチ ャ を 
無効 に する 

異な っ た ロケ ーション (サー バー) 
か ら の イベ ント キャ プチ ャ を 許す 
(Signed Script な ど と 合わ せ て 
使用 する ) 

ウィ ンド ウ の 中 に 指定 し た 文字 列 
が ある か (あれ ば true、 な けれ ば 
false) 

ひと つ 先 の URL に 進む 

home に 指定 し た URL に 進む 
ウィ ンド ウ を 移動 する (水平 方 向 
と 垂直 方 向 の 移動 量 を ビク セル で 
指定 ) 

ウィ ンド ウ を 移動 する (ウィ ンド 
ウ の 左上 の 角 を 基準 に ビク セル で 
指定 ) 

ウィ ンド ウ を リサ イズ する (底辺 
の 角 を 基準 に 水平 方 向 と 垂直 方 向 
を ピク セル で 指定 ) 

ウィ ンド ウ を リサ イズ する (ウィ 
ンド ウ の サイ ズ を ピク セル で 指定 ) 
ウィ ンド ウ を スク ロー ル す る 
(ウィ ンド ウ の 表示 領域 の 水平 方 
向 と 垂直 方 向 に 対し て ビク セル で 
指定 ) 

ウィ ンド ウ を スク ロー ル す る 
(ウィ ンド ウ の 左上 の 角 を 基準 に 
ピク セル で 指定 ) 
読み 込み を 中 止 す る 
すべ て の タイ ブ の イベ ント を 取得 
する 

一 定時 間 (1000 分 の 1 秒 ) ご と 
に 指定 され た 処理 を 繰り 返す 
「setInterval0」 メ ソ ッ ド の 停止 
イベ ント 取り 扱い 者 を 特定 する 
プリ ント する 

別 階層 の イベ ント に イベ ント を 渡す 
取得 し た イベ ント と 同じ 階層 の イ 
ベン ト 








(JavaScripl.3) 
to8ource0 オブ ジェ クト の 値 を 文字 列 で 返す 
【open0 の 属性 オプ ショ ン 】 
(JavaScriptl.0) 
*・ [yesino 則 1!0] 
ツー ル バ ー 
ロケ ーション ボッ クス 
ディ レク トリ ボタ ン 
ステ ー タ ヌメ 7 パー 
メニ ュー バー 
スク ロー ル バ ー 
リサ イズ ボッ クス 
ウィ ンド ウ の 横幅 
ウィ ンド ウ の 縦 幅 





(JavaScript1.2) 
*・ [yesino]l=10] 


他 の ウィ ンド ウ よ り 前 に 来る ウィ 
ンド ウ 

他 の ウィ ンド ウ よ り 後 ろ に 来る 
ウィ ンド ウ 

現在 の ウィ ンド ウ の 子 ウ ィ ン ド ウ 
ホッ トキ ー を 無力 に する 

ウィ ンド ウ の 表示 領域 の 横幅 
(width か ら 変 更 ) 

ウィ ンド ウ の 表示 領域 の 高 さ 
(height か ら 変更 ) 

ウィ ンド ウ の 外周 の 幅 


ウィ ンド ウ の 外周 の 高 さ 

ディ スプ レイ 左上 か ら の X 軸 の 位置 
ディ スプ ブレ イ 左 上 か ら の Y 軸 の 位置 
タイ トル バー の 表示 

フォ ー カ ス が 移っ て も 他 の ウィ ン 
ドウ の 前 に 来 な い ウ ィ ン ド ウ 

【 イ ベン ト ハ ンド ラ 】 

(JavaScriptl.0) 


onLoad 
onUnload 





(JavaScriptl.1) 
onBlur 
onError 


onFocus 


frame オブ ジェ クト 

frame オプ ジェ クト の 情報 を 提供 し た り 、 操 作 を 行 
うり オグ ジェ グ ド 。 

frame オプ ジェ クト は 、 そ れ 自 体 が window オプ 
ジェ クト の プロ パテ ィ で す が 、 最 上 層 の オプ ジェ 
クト で ある 「window」 は 省略 可能 で す 。 

ウィ ンド ウ 内 の フレ ー ム の 配列 を 作成 し ます 。 フ 
レー ム の 情報 を 取得 し て 利用 する こと に よっ て 、 
フレ ー ム 操作 の 幅 を 広げ る こと が で きま す 。 


【 プ ロ パ ティ 】 
(JavaScript1.0) 













フレ ー ム 配列 

フレ ー ム 名 

フレ ー ム の 数 

現在 の フレ ー ム の 親 フ レー ム 
現在 の フレ ー ム 自身 

現在 の フレ ー ム の ウィ ンド ウ 自 身 





(JavaScriptl.1) 
な し 


【 メ ソ ッ ド 】 
(JavaScriptl.0) 





「setTimeout0]」 メ ソ ッ ド の 停止 
ミリ 秒 (1000 分 の 1 秒 ) 単 位 で 指 
定 され た 時 間 後に 命令 を 実行 する 
オブ ジェ クト な 文字 列 に 変え る 






(JavaScript1.1) 
フォ ー カ ス を 移動 する 


フォ ー カ ス を 与え る 
オブ ジェ クト の 値 を 返す 








(JavaScriptl.2) 
一 定時 間 (1000 分 の ] 秒 ) ご と 
に 指定 され た 処理 を 繰り 返す 

「setInterval0」 メ ソ ッ ド の 停止 
イベ ント 取り 扱い 者 を 特定 する 









プリ ント する 
に 
オブ ジェ クト の 値 を 文字 列 で 返す 
【 イ ベン ト ハ ンド ラ 】 
(JavaScript1.0) 
な し 
(JavaScriptl.1) 
onblur 
QnFocus 
document オ ブ ジ ェクト 


HTML フ ァイル 、 お よび そこ に 記述 され る ドキ ュ 
メン ト の 情報 を 提供 し た り 、 操 作 を 行う オプ ジェ 
クト 。 

Layer オ プ ジ ェ クト 、Link オプ ジェ クト 、1mage オ 
プ ジ ェ クト 、Area オプ ジェ クト 、Anchor オ プ ジ ェ 
クト 、Applet オ プ ジ ェ クト 、Form オプ ジェ クト な 
ど 、 多 く の オ プ ジ ェ クト を 含ん で いま す 。 
document オプ ジェ クト は 、 そ れ 自 体 が window オ 
プ ジ ェ クト の プロ パテ ィ で す が 、 最上 層 の オプ ジェ 
クト で ある 「window] は 省略 可能 で す 。 


【 プ ロ パ ティ 】 






アク ティ ブリ ンク の 色 
背景 の 色 

クッ キー ファ イル の 情報 
テキ スト の 色 

ファ イル の 最終 更新 日 時 

リン ク の 色 

リン ク 元 の UHL 

ドキ ュ メ ント の タイ トル 

カレ ント の URL 

すでに 行っ た こと の ある リン ク の 色 

















アン カー オブ ジェ クト お よび 配列 
フォ ー ム オブ ジェ クト お よび 配列 
リン クオ ブ ジ ェクト お よび 配列 


(JavaScriptl.1) 
カレ ント の ドメイン 名 (tainting 
状態 時 の み 使 用 可能 ) 

アブ プレット 配列 
エリ アオ ブ ジ ェクト 

ブラ グイ ン 配 列 

イメ ー ジ オブ ジェ クト お よび 配列 





(JavaScriptl.2) 
ayer@ レイ ヤー オブ ジェ クト お よび 配列 
【 メ ソ ッ ド 】 









(JavaScriptl.0) 





ドキ ュ メ ント スト リー ム を 閉じ る 
ドキ ュ メ ント スト リー ム を 開く 
テキ スト を 書き 出す 

テキ スト を 改行 付き で 書き 出す 
オブ ジェ クト な 文字 列 に する 







(JavaScriptl.1) 


valueof0 オブ ジェ クト の 値 を 返す 


(JavaScriptl.2) 

選択 範囲 内 に 含ま れ て いる 文字 列 
を 返す 
すべ て の タイ プ の イベ ント を 取得 
する 








別 階層 の イベ ント に イベ ント を 渡す 








取得 し た イベ ント と 同じ 階層 の イ 
ペ ジ シト 








(JavaScript1.3) 


toSouree0 オブ ジェ クト の 値 を 文字 列 で 返す 





【 イ ベン ト ハ ンド ラ 】 
な し 


[JavaScript1.1 で 削除 され た プロ パテ ィ ・ メ ソ ッ ド 】 
location 


clear() 


history オ ブ ジ ェクト 

プラ ウザ が ロー ド し た ペー ジ の 来歴 を 提供 する オ 
ゲ ジ ェクト 。 

history オプ ジェ クト は 、 そ れ 自 体 が window オブ 
ジェ クト の プロ パテ ィ で す が 、 最 上 層 の オプ ジェ 
クト で ある 「window」 は 省略 可能 で す 。 





【 プ ロ パ ティ 】 


(JavaScript1.0) 


engm 。 来歴 の 数 





削除 ぐれ た プロ パテ ィ ・ メ ソ ッ ド に つい て 


現在 、Netscape 社 の 「JavaScript Guide] で は 、JavaScript1 .0 に は あっ た 「location] プ ロ パ ティ 


と 「clear0」 メ ソ ッ ド が 姿 を 消し て いま す 。 


「location」 ブ プロ パテ ィ は 、 以 前 より 「location プロ バテ ィ は 将来 的 に は 使え な く な る の で 、URL プロ パ 
ティ を 使う よう に ]」 と の アナ ウン ス が され て お り 、 こ れ は お そら く location オ ブ ジ ェクト と の 混乱 を 避け 


る た め の 処 置 だ と 思わ れ ま す 。 


また 、「clear()」 メ ソ ッ ド に 関し て は 、「open()」 メ ソ ッ ド な ど を 利用 し て 似 た よう な 効果 を 出す こと が 可 
能 な た め 、 削 除 さ れ た も の と 思わ れ ま す 。. 
な お 、 こ の ふた つの コマ ンド は 、 今 の と ころ Netscape Navigator 3.0 で 使用 可能 な よう で す が 
(Windows 版 で は 「clear()」 メ ソ ッ ド は 正常 に 動か な い 可能 性 が あり ます )、 今 後 の こ と を 考え る と な る べ 
く 使用 し な いこ と を お 勧め し ます 。 









(JavaScriptl.1) 

現在 の 来歴 (tainting 状態 時 の み 
使用 可能 ) 

次 の 来歴 (tainting 状態 時 の み 使 
用 可能 ) 

ひと つづ 前 の 来歴 (tainting 状態 時 
の み 使 用 可能 ) 









【 メ ソ ッ ド 】 
(JavaScriptl.0) 






ひと つ 前 の ペー ジ に 進む 
ひと つ 先 の ペー ジ へ 進む 
指定 され た 分 だ け ペ ー ジ を 移動 する 
オブ ジェ クト を 文字 列 に 変え る 


(JavaScriptl.1) 
欄 題 9 オブ ジェ クト の 値 を 返す 


(JavaScriptl.3) 


to8ouree0 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
な し 


location オ ブ ジ ェクト 
表示 され て いる ペー ジ の URL に 関す る 情報 を 提供 
する オプ ジェ クト 。 

location オプ ジェ クト は 、 そ れ 自 体 が window オプ 
ジェ クト の プロ パテ ィ で す が 、 最 上 層 の オプ ジェ 
クト で ある 「window」 は 省略 可能 で す 。 

また 、location オプ ジェ クト は 読み 出し だ け で な 
く 、 動 的 に URL を 変更 する こと が 可能 で す 。 















【 プ ロ パ ティ 】 
(JavaScriptl.0) 





アン カー 名 

URL の ホス ト 名 と ポー ト 番 号 部 分 
URL の ホス トコ ンピュータ 名 部 分 
URL 

URL の バス 名 部 分 

URL の ポー ト 番 号 部 分 





URL の プロ トコ ル 部 分 
URL の 問い 合わ せ 部 分 
(JavaScriptl.1) 
な し 


【 メ ソ ッ ド 】 





(JavaScriptl.0) 


to8tng0 オブ ジェ クト な 文字 列 に 変え る 


(JavaScriptl.1) 


リロ ー ド する 
現在 の URL を 置き 換え る 
オブ ジェ クト の 値 を 返す 


(JavaScriptl.3) 
NE オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
な し 


Link オブ ジェ クト 

HTML ファ イル 内 の リン ク の 配列 を 作成 し 、 リ ン 
ク ひ と つ ひ と つの 情報 を 提供 する オプ ジェ クト 。 
Link オプ ジェ クト は 、 そ れ 自 体 が document オプ 
ジェ クト の プロ パテ ィ で す 。 


【 プ ロ パ ティ 】 
(JavaScriptl.0) 












アン カー 名 
リン ク 先 の URL の ホス ト 名 と ポー ト 
番号 部 分 

リン ク 数 

リン ク 先 の URL の ホス トコ ン ピ ュ ー 
タ 名 部 分 

リン ク 先 の URL 

リン ク 先 の URL の パス 名 部 分 

リン ク 先 の URL の ポー ト 番 号 部 分 
リン ク 先 の URL の プロ トコ ル 部 分 
リン ク 先 の URL の 問い 合わ せ 部 分 
リン ク 先 の ター ゲッ ト 属 性 


































(JavaScriptl.1) 
な し 


【 メ ソ ッ ド 】 


(JavaScriptl.0) 

堀 号証 - オブ ジェ クト な 文字 列 に 変え る 
(JavaScriptl.1) 

王 編 7 志 オブ ジェ クト の 値 を 返す 


(JavaScriptl.2) 


handleEvent0 イベ ント 取り 扱い 者 を 特定 する 


(JavaScriptl.3) 


toSouree0 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
(JavaScript1.0) 
onClick 
onMouseOver 


(JavaScripll.1) 
onMouseOut 


Anchor オブ ジェ クト (配列 ) 

HTML ファ イル 内 の Anchor の 配列 を 作成 する オプ 
ジェ エグ ト 。 

Anchor オ プ ジ ェ クト は 、 そ れ 自 体 が document オ 
プ ジ ェ クト の プロ パテ ィ で す 。 


【 プ ロ パ ティ 】 


(JavaScript1.0) 
油 本 8 アン カー の 数 


(JavaScriptl.1) 
な し 





【 メ ソ ッ ド 】 
(JavaScript.0) 


toStng0 オブ ジェ クト を 文字 列 に 変え る 


(JavaScriptl.1) 


valueOf0 オブ ジェ クト の 値 を 返す 


(JavaScriptl.3) 
本 本 軌 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
な し 


Form オブ ジェ クト 

フォ ー ム に 関す る 情報 を 提供 し た り 、 操 作 を 行う 
オプ ジェ クト 。 

Form オプ ジェ クト は 、 そ れ 自 体 が document オ プ 
ジェ クト の プロ パテ ィ で す 。 

HTML の <form> を 、JavaScript の オプ ジェ クト と 
し て 取り 扱い ます 。 デ ー タ 入力 を 受け 付け て 送信 
する だ け で な く 、 入 力 内 容 の チェ ッ ク や 入力 され 
た デー タ の 計算 を プラ ウザ 側 で 行っ た り 、 リ アル 
タイ ム で フォ ー ム の 内 容 を 変化 させ る な ど 、 フ ォ ー 
ム の 利用 方 法 を 広げ る こと が 可能 で す 。 
Textarea オ プ ジ ェ クト 、Text オ プ ジ ェ クト 、 
FileUpload オプ ジェ クト 、Password オプ ジェ クト 、 
Hidden オプ ジェ クト 、Submit オプ ジェ クト 、Reset 
オプ ジェ クト 、Radio オプ ジェ クト 、Checkbox オ 
プ ジ ェ クト 、Button オプ ジェ クト 、Select オプ ジェ 
クト な ど 、 多 く の オ プ ジ ェ クト を 含ん で いま す 。 





【 プ ロ パ ティ 】 
(JavaScriptl.0) 


フォ ー ム 内 の デー タ の 送り 先 
フォ ー ム 内 の 内 容 ( 配 列 ) 
フォ ー ム の MINE エ ンコ ー ド 
フォ ー ム エレ メン ト の 数 
オブ ジェ クト 名 

フォ ー ム の 送信 方 法 

ター ゲッ トウ ィ ン ド ウ 
Button オ ブ ジ ェクト 
Checkbox オ ブ ジ ェクト 
Hidden オ ブ ジ ェクト 








Password オ ブ ジ ェクト 
Radio オ ブ ジ ェクト 
Reset オ ブ ジ ェクト 
Select オ ブ ジ ェクト 
Submit オ ブ ジ ェクト 
Text オ ブ ジ ェクト 
Textarea オ ブ ジ ェクト 


(JavaScriptl.1) 


FleUpload FileUpload オ ブ ジ ェクト 


【 メ ソ ッ ド 】 
(JavaScriptl.0) 


送信 ボタ ン が 押さ れ た の と 同じ 
オブ ジェ クト を 文字 列 に 変え る 


(JavaScriptl.1) 













リセ ッ ト ボ タン が 押さ れ た 状態 と 
同じ 
オブ ジェ クト の 値 を 返す 





(JavaScriptl.2) 
deEvert0 イベ ント 取り 扱い 者 を 特定 する 


(JavaScript1.3) 
rg オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
(JavaScriptl.0) 


onSubmit 


(JavaScriptl.1) 
onReset 





ECOIkL アル オセ 

フォ ー ム の Button に 関す る 情報 を 提供 し た り 、 操 
作 を 行う オプ ジェ クト 。 

HTML の <input type="button"> を 使っ て 作成 され 
た ボタ ン 型 の フォ ー ム を 、 JavaScript の オプ ジェ ク 
ト と し て 取り 扱い ます 。 


【 プ ロ パ ティ 】 


(JavaScript1.0) 
オブ ジェ クト 名 
オブ ジェ クト 内 の 値 






(JavaScriptl.1) 
2 生計 オブ ジェ クト の タイ プ 


【 メ ソ ッ ド 】 
(JavaScriptl.0) 








クリ ッ ク と 同じ 
オブ ジェ クト を な 文字 列 に 変え る 











(JavaScripl.1) 
フォ ー カ ス を 移動 する 
フォ ー カ ス を 与え る 
オブ ジェ クト の 値 を 返す 


(JavaScript1.2) 

sage イベ ント 取り 扱い 者 を 特定 する 
(JavaScript1.3) 

9 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
(JavaScript1.0) 
onClick 








(JavaScriptl.1) 
onBlur 
onFocus 


Checkbox オプ ジェ クト 


フォ ー ム の Checkbox に 関す る 情報 を 提供 し た り 、 
操作 を 行う オプ ジェ クト 。 

HTML の <inputtype="Checkbox"> を 使っ て 作成 さ 
れ た チェ ッ ク ボ ックス 型 の フォ ー ム を 、Java 
Script の オプ ジェ クト と し て 取り 扱い ます 。 








【 プ ロ パ ティ 】 






(JavaScriptl.0) 

チェ ッ ク さ れ て いる 状態 
デフ ォ ル ト で チェ ッ ク さ れ て いる 
状態 

オブ ジェ クト 名 
オブ ジェ クト 内 の 値 








(JavaScriptl.1) 


還 S 串 オブ ジェ クト の タイ プ ブ 


【 メ ソ ッ ド 】 
(JavaScriptl.0) 


クリ ッ ク と 同じ 
オブ ジェ クト を な 文字 列 に 変え る 


(JavaScriptl.1) 


フォ ー カ ス を 移動 する 
フォ ー カ ス を 与え る 
オブ ジェ クト の 値 を 返す 





(JavaScriptl.2) 


handleEvent0 イベ ント 取り 扱い 者 を 特定 する 
(JavaScriptl.3) 
MR オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
(JavaScriptl.0) 
onClick 


(JavaScriptl.1) 
onBlur 


OnFocus 


FileUpload オプ ジェ クト (JavaScript1.1~) 
フォ ー ム の FileUpload に 関す る 情報 を 提供 し た り 、 
操作 を 行う オプ ジェ クト 。 

HTML の <input type="FileUpload"> を 使っ て 作成 
され た ファ イル 選択 欄 型 の フォ ー ム を 、Java 
Script の オプ ジェ クト と し て 取り 扱い ます 。 





【 プ ロ パ ティ 】 
(JayaScriptl.0) 


(JavaScript1.1) 





オブ ジェ クト 名 
オブ ジェ クト 内 の 値 
オブ ジェ クト の タイ プ 
【 メ ソ ッ ド 】 
(JavaScript1.0) 


(JavaScriptl.1) 





フォ ー カ ス を 移動 する 
フォ ー カ ス を 与え る 

オブ ジェ クト を な 文字 列 に 変え る 
オブ ジェ クト の 値 を 返す 






(JavaScriptl.2) 


イベ ント 取り 扱い 者 を 特定 する 


(JavaScript1.3) 


toSource0 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
(JavaScriptl.0) 
未 対応 


(JavaScriptl.1) 
onBlur 
onChange 


onFocus 


LI に に に ョ レア ルオ ンス 


フォ ー ム の Hidden に 関す る 情報 を 提供 し た り 、 操 
作 を 行う オプ ジェ クト 。 

HTML の <input type="Hidden"> を 使っ て 作成 され 
た 隠し テキ スト ボッ クス 型 の フォ ー ム を 、Java 
Script の オプ ジェ クト と し て 取り 扱い ます 。 





【 プ ロ パ ティ 】 







(JavaScriptl.0) 





オブ ジェ クト 名 
オブ ジェ クト 内 の 値 





(JavaScriptl.1) 


OM 二天 オブ ジェ クト の タイ プ 


【 メ ソ ッ ド 】 
(JavaScriptl.0) 





ostimg0 オブ ジェ クト を な 文字 列 に 変え る 


(JavaScriptl.1) 


valueof0 オブ ジェ クト の 値 を 返す 


(JavaScript1.2) 


_handleEvent0 イベ ント 取り 扱い 者 を 特定 する 


(JavaScript1.3) 


toSource0 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
な し 


に に いい レア ルオ セス 


フォ ー ム の Password に 関す る 情報 を 提供 し た り 、 操 
作 を 行う オプ ジェ クト 。 

HTML の <inputype="Password"> を 使っ て 作成 され 
た パス ワー ド 入 力 用 テキ スト ボッ クス 型 の フォ ー ム 
を 、 JavaScripr の オプ ジェ クト と し て 取り 扱い ます 。 


【 プ ロ パ ティ 】 
(JavaScript1.0) 
デフ ォ ル ト の オブ ジェ クト 内 の 値 
オブ ジェ クト 名 
オブ ジェ クト 内 の 値 


1 
(JavaScriptl.1) 
EER オブ ジェ クト の タイ プ 







【 メ ソ ッ ド 】 
(JavaScriptl.0) 





選択 され た 状態 

フォ ー カ ス を 移動 する 
フォ ー カ ス を 与え る 
オブ ジェ クト を な 文字 列 に 変え る 













(JavaScriptl.1) 


yalueof0 オブ ジェ クト の 値 を 返す 


(JavaScript1.2) 


handleEvent0 イベ ント 取り 扱い 者 を 特定 する 


(JavaScript1.3) 


toSource0 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
(JavaScriptl.0) 
な し 


(JavaScript1.1) 
onBlur 
onFocus 


ルッ ルオ ナン 

フォ ー ム の Radio に 関す る 情報 を 提供 し た り 、 操 
作 を 行う オプ ジェ クト 。 
HTML の <input type="Radio"> を 使っ て 作成 され 
た ラジ オ ボ タ ン 型 の フォ ー ム を 、 JavaScript の オプ 
ジェ クト と し て 取り 扱い ます 。 





【 プ ロ パ ティ 】 
(JavaScript1.0) 





選択 され て いる 状態 
デフ ォ ル ト で 選択 され て いる 状態 
オブ ジェ クト の 数 
オブ ジェ クト 名 
オブ ジェ クト 内 の 値 

















(JavaScriptl.1) 


オブ ジェ クト の タイ ブ 


【 メ ソ ッ ド 】 
(JavaScript1.0) 





クリ ッ ク と 同じ 
オブ ジェ クト な 文字 列 に 変え る 


(JavaScriptl.1) 


フォ ー カ ス を 移動 する 
フォ ー カ ス を 与え る 
オブ ジェ クト の 値 を 返す 


(JavaScriptl.2) 
endleEyemt0 イベ ント 取り 扱い 者 を 特定 する 


(JavaScriptl.3) 

toSouree0 オブ ジェ クト の 値 を 文字 列 で 返す 
【 イ ベン ト ハ ンド ラ 】 

(JavaScriptl.0) 

onClick 





(JavaScriptl.1) 
onBlur 
OnFocus 


Reset オ プ ジ ェ クト 

フォ ー ム の Reset に 関す る 情報 を 提供 し た り 、 操 
作 を 行う オプ ジェ クト 。 

HTML の <inputtype="Reset"> を 使っ て 作成 され た 
リセ ッ ト ボ タン 型 の フォ ー ム を 、JavaScript の オプ 
ジェ クト と し て 取り 扱い ます 。 


Reset 名 [イン デック ス ] .property 
Reset 名 [イン デック ス ] .method( ) 
Form 名 .e1ements [イン デック ス ] .property 
form 名 .e1ements [イン デック ス ] .method ( ) 


【 プ ロ パ ティ 】 






(JavaScript1.0) 
オブ ジェ クト 名 
オブ ジェ クト 内 の 値 


(JavaScript1.1) 


還 証 間 還 上 フジ ェクト の タイ フ 














【 メ ソ ッ ド 】 
(JavaScriptl.0) 

クリ ッ ク と 同じ 

オブ ジェ クト を な 文字 列 に 変え る 
(JavaScriptl.1) 





フォ ー カ ス を 移動 する 















フォ ー カ ス を 与え る 

オブ ジェ クト の 値 を 返す 
(JavaScriptl.2) 

イベ ント 取り 扱い 者 を 特定 する 
(JavaScriptl.3) 


toSouree0 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
(JavaScriptl.0) 
onClick 


(JavaScriptl.1) 
onBlur 


onFocus 


ドロ を アル オシ スロ 

フォ ー ム の Select に 関す る 情報 を 提供 し た り 、 操 
作 を 行う オプ ジェ クト 。 
HTML の <select> と <option> を 使っ て 作成 され た 
選択 欄 型 の フォ ー ム と 、 そ の 中 の 選択 項目 を 、 
JavaScript の オプ ジェ クト と し て 取り 扱い ます 。 


【 用 法 】 

select 名 [イン デック ス ] .property 
select 名 [イン デック ス ] .method ( ) 

Form 名 .e1ements [イン デック ス ] .property 
form 名 .e1ements [イン デック ス ] .method ( ) 


【 オ プシ ョ ン 】 

select 名 .options [イン デック ス ] .property 
form 名 .e1ements [イン デック ス ] . options 
[イン デック ス ] .property 4 
option 名 . property 


【 オ プシ ョ ン 配 列 】 





【 プ ロ パ ティ 】 
(JavaScript1.0) 







オブ ション の 数 
オブ ジェ クト 名 
オプ ショ ン 項 目 
選択 され て いる 項目 


(JavaScriptl.1) 
EN オブ ジェ クト の タイ プ 


【 オ プシ ョ ン ( 配 列 )】 

(JavaScript1.0) 

デフ ォ ル ト で 選択 され て いる 項目 
項目 の 位置 
選択 され て いる 状態 
オブ ジェ クト 内 の 値 





【 メ ソ ッ ド 】 


(JavaScript1.0) 
クリ ッ ク と 同じ 5 
オブ ジェ クト な 文字 列 に 変え る 


(JavaScriptl.1) 


フォ ー カ ス を 移動 する 
フォ ー カ ス を 与え る 
オブ ジェ クト の 値 を 返す 


(JavaScriptl.2) 
eyeo イベ ント 取り 扱い 者 を 特定 する 
(JavaScript1.3) 
本 本 6 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
(JavaScriptl.0) 
onChange 






(JavaScriptl.1) 
onBlur 


onFocus 












Submit オ プ ジ ェ クト 

フォ ー ム の Submit に 関す る 情報 を 提供 し た り 、 操 
作 を 行う オプ ジェ クト 。 

HTML の <input type="Submit"> を 使っ て 作成 され 
た フォ ー ム 内 容 送信 用 ボタ ン 型 の フォ ー ム を 、 
JavaScript の オプ ジェ クト と し て 取り 扱い ます 。 





【 プ ロ パ ティ 】 


(JavaScriptl.0) 
オブ ジェ クト 名 
オブ ジェ クト 内 の 値 


(JavaScriptl.1) 
ED オブ ジェ クト の タイ プ 


【 メ ソ ッ ド 】 









(JavaScripll.0) 
クリ ッ ク と 同じ 
オブ ジェ クト を 文字 列 に 変え る 


(JavaScriptl.1) 


フォ ー カ ス を 移動 する 
フォ ー カ ス を 与え る 
オブ ジェ クト の 値 を 返す 


(JavaScriptl.2) 

aaa イベ ント 取り 扱い 者 を 特定 する 
(JavaScript1.3) 

本 の オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
(JavaScript1.0) 
onClick 





(JavaScriptl.1) 
onBlur 


onFocus 








IL くに エート アル オシ 


フォ ー ム の Textarea に 関す る 情報 を 提供 し た り 、 
操作 を 行う オプ ジェ クト 。 
HTML の <textarea> 使っ て 作成 され た テキ スト エ 
リア 型 の フォ ー ム を 、JavaScript の オプ ジェ クト と 
し て 取り 扱い ます 。 








【 プ ロ パ ティ 】 






(JavaScript1.0) 
デフ ォ ル ト の オブ ジェ クト の 値 
オブ ジェ クト 名 

オブ ジェ クト 内 の 値 










(JavaScriptl.1) 


オブ ジェ クト の タイ ブ 


【 メ ソ ッ ド 】 
(JavaScript1.0) 


フォ ー カ ス を 移動 する 
フォ ー カ ス を 与え る 
オブ ジェ クト な 文字 列 に 変え る 


(JavaScriptl.1) 
本 還 E オブ ジェ クト の 値 を 返す 


(JavaScriptl.2) 


handleEvent0 イベ ント 取り 扱い 者 を 特定 する 


(JavaScriptl.3) 


toSouree0 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
(JavaScriptl.0) 
onBlur 

onChange 

onFocus 





OnSelect 


(JavaScriptl.1) 
な し 


フォ ー ム の Text に 関す る 情報 を 提供 し た り 、 操 作 





を 行う オプ ジェ クト 。 

HTML の <input type="Text'> を 使っ て 作成 され た 
テキ スト 入力 欄 型 の フォ ー ム を 、 JavaScript の オプ 
ジェ クト と し て 取り 扱い ます 。 





【 プ ロ パ ティ 】 
(JavaScriptl.0) 
デフ ォ ル ト の オブ ジェ クト の 値 


オブ ジェ クト 名 
オブ ジェ クト 内 の 値 





(JavaScriptl.1) 


pe オブ ジェ クト の タイ プ 


【 メ ソ ッ ド 】 
(JavaScript1.0) 





フォ ー カ ス を 移動 する 
フォ ー カ ス を 与え る 
オブ ジェ クト な 文字 列 に 変え る 






(JavaScriptl.1) 


valueof0 オブ ジェ クト の 値 を 返す 


(JavaScript1.2) 


handleEvent0 イベ ント 取り 扱い 者 を 特定 する 
(JavaScript1.3) 
9 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
(JavaScript1.0) 
onBlur 

onChange 

onFocus 

onSelect 


(JavaScriptl.1) 
な し 


Area オ ブ ジ ェクト 
(JavaScript1.1) 

イメ ー ジ マッ プ の 定義 や 、 そ の 情報 を 提供 する オ 
プ ジ ェ グ ド トド 。 

Area オプ ジェ クト は 、Link の 配列 内 に あり ます 。 
し た が っ て 、 リ ンク を 参照 する 場合 は 、「document 
links[ イ ン デ ックス ]] を 使用 し ます 。 


【 プ ロ パ ティ 】 
(JavaScriptl.0) 


(JavaScriptl.1) 














アン カー 名 

リン ク 先 の URL の ホス ト 名 と 
ポー ト 番 号 部 分 

リン ク 先 の URL の ホス トコ ン 

ピュ ー タ 名 部 分 

リン ク 先 の URL 

リン ク 先 の UHL の バス 名 部 分 

リン ク 先 の URL の ポー ト 番 号 部 分 
リン ク 先 の URL の ブロ トコ ル 部 分 
リン ク 先 の URL の 問い 合わ せ 部 分 
リン ク 先 の ター ゲッ ト 属 性 


[メソッド 】 
(JavaScript1.0) 


(JavaScript1.1) 
オブ ジェ クト を な 文字 列 に 変え る 
オブ ジェ クト の 値 を 返す 
(JavaScript1.2) 


handleEvent0 イベ ント 取り 扱い 者 を 特定 する 


(JavaScript1.3) 

toSouree0 オブ ジェ クト の 値 を 文字 列 で 返す 
【 イ ベン ト ハ ンド ラ 】 

(JavaScript1.0) 

未 対応 


(JavaScriptl.1) 
onMouseOver 
onMouseOut 


Image オブ ジェ クト 
(JavaScript1.1 て ) 

画像 に 関す る 情報 を 提供 し た り 、 操 作 を 行う オプ 
ジェ み ' ド 。 

画像 ファ イル の 情報 を 提供 する 以外 に 、 画 像 を 後 
か ら 置 き 換 える こと も 可能 で す 。 こ れ に より 、 画 
像 を アニ メー ショ ン さ せ た り 、 イ ベン ト ハ ンド ラ 
と 組み 合わ せる こと に よっ て 、 イ ンタ ラク ティ プ 
に 画像 を 取り 扱う こと が で きま す 。 

ビル トイ ン オ プ ジ ェ クト の よう に 、 new 演算 子 を 
使っ て 、 オ プ ジ ェ クト を 新た に 作成 する こと も で 
きま す 。 


【 オ ブ ジ ェクト の 作成 】 


【 用 法 】 


【 プ ロ パ ティ 】 
(JavaScript1.0) 


(JavaScriptl.1) 





border で 設定 され た 値 
画像 の 読み 込み が 終了 し て いる か 
どう か 

イメ ー ジ の 高 さ 

height で 設定 され た 値 

イメ ー ジ の 数 

lowsrc で 設定 し て いる 画像 ファ 
イル の UHRHL 

イメ ー ジ の 名 前 

新しい プロ パテ ィ の 作成 

画像 ファ イル の URL 

Vspace で 設定 され た 値 
画像 の 幅 


























【 メ ソ ッ ド 】 
(JavaScript1.0) 
未 対応 
(JavaScriptl.1) 
オブ ジェ クト な 文字 列 に 変え る 
オブ ジェ クト の 値 を 返す 
(JavaScriptl.2) 
handleEvent0 イベ ント 取り 扱い 者 を 特定 する 
(JavaScript1.3) 


to8ouree0 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
(JavaScriptl.1) 
onAbort 

onError 

onLoad 


Layer オ ブ ジ ェクト 
(JavaScript1.2 ^) 

レイ ヤー に 関す る 情報 を 提供 し た り 、 操 作 を 行う 
オプ ジェ ク トト 。 

Netscape Navigator 4.0 で 追加 され た <layer> に 関連 
し た JavaScript で す 。 

レイ ヤー の show( 見 える 状態 ) と hide( 隠 され た 状 
態 ) の 動 的 な 切り 替え や 、 指 定位 置 へ の 移動 な ど 、 
イン タラ クティ ブ な 要素 を 付け 加え る こと が で き 
ます 。 

Layer オ プ ジ ェ クト は 、document オ プ ジ ェ クト の 
プロ パテ ィ で す 。 


【 用 法 】 

1ayer 名 .property 補 締 
1ayer 名 .method (数 値 ) 

document . 1ayer 名 

document . 1ayers [イン デック ス ] 
document .1ayers["1ayer 名 "] 


【 ネ スト され て いる レイ ヤー の プロ パテ ィ を 使う 時 】 
document . 1ayers[" 親 1ayer"] 本 
" 子 1ayer"] 


【 プ ロ パ ティ 】 
(JavaScript1.2) 





オブ ジェ クト 名 の 設定 

レイ ヤー の コン テン ツ の 横幅 
(ピクセル) 

レイ ヤー の コン テン ツ の 高 さ 
(ビク セル ) 

画面 大 か ら の レイ ヤー の 位置 
(ピクセル) 

画面 上 て から の レイ ヤー の 位置 
(ピク セル ) 

レイ ヤー が show( 見 える 状態 ) か 
hide( 隠 され た 状態 ) か を 返す 
レイ ヤー の Z-Index の 値 を 返す 
ペー ジ 上 の X 座 標 ( ビ クセ ル ) 
ペー ジ 上 の Y 座 標 (ピク セル ) 


.「Layer.left.] と 同義 


「Layer.top.」 と 同義 

レイ ヤー 内 の クリ ッ プ の 上 か ら の 
位置 

レイ ヤー 内 の クリ ッ プ の 左 か ら の 
位置 

レイ ヤー 内 の クリ ッ プ の 右 か ら の 
位置 

レイ ヤー 内 の クリ ッ プ の 下 か ら の 
位置 

レイ ヤー 内 の クリ ッ プ の 横幅 
レイ ヤー 内 の クリ ッ プ の 高 さ 
レイ ヤー の 背景 画像 の 指定 

レイ ヤー の 痛 景色 の 指定 

兄弟 レイ ヤー 内 で ひと つ 上 の レイ 
ヤー を 参照 する 。 も し も 1 番 先頭 
だ っ た ら 「nulll を 返す 

兄弟 レイ ヤー 内 で ひと つ 下 の レイ 
ヤー を 参照 する 。 も し も 1 番 後ろ 
だ っ た ら 「null」 を 返す 

ひと つ 上 の レイ ヤー を 参照 する 。 
も し も 1 番 先頭 だ っ た ら 「nulll を 
返す 

ひと つ 下 の レイ ヤー を 参照 する 。 
も し も 1 番 後 ろだ っ た ら 「nulll を 
返す 

符合 する レイ ヤー の 状況 。 親 の レ 
イヤ ー だ っ た ら 「null」 を 返す 







LAYEH 配 列 
レイ ヤー の ソー ス を 外部 か ら 呼 び 
出す 時 の URL 


【 メ ソ ッ ド 】 
(JavaScript1.2) 





現在 の 表示 位置 か ら の レイ ヤー の 
表示 位置 移動 (ビク セル ) 
画面 の 左上 か ら の レイ ヤー の 表示 
位置 移動 (ピク セル ) 

レイ ヤー コン テン ツ 内 で の レイ 
ヤー 位置 移動 (ビク セル ) 

レイ ヤー の サイ ズ を 指定 され た 分 
だ け 変 更 す る (ビク セル ) 

レイ ヤー の サイ ズ を 指定 され た サ 
イズ へ 変更 する (ピクセル) 

レイ ヤー を 前 に 出す 

レイ ヤー を 後ろ に 入れ る 
外部 か ら レ イヤ ー の HTML ファ 
イル を 読み 込む 

すべ て の タイ ブ の イベ ント を 取得 する 
イベ ント 取り 扱い 者 を 特定 する 
別 階層 の イベ ント に イベ ント を 渡す 
取得 し た イベ ント と 同じ 階層 の イ 
ベン ト 


(JavaScript1.3) 
商 馬 李 到 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
onMouseOver 
onMouseOut 

onLoad 

OnFocus 

onBlur 


Applet オ ブ ジ ェクト (配列 ) 
(JavaScript1.1 て ) 


JAVA アプ レッ ト 関 連 の オプ ジェ クト お よび 配列 。 


【 プ ロ パ ティ 】 

(JavaScriptl.1) 

ength アプ レッ ト の 数 (配列 数 ) 

【 メ ソ ッ ド 】 

(JavaScriptl.1) 

JAVA ア プレ ッ ト の すべ て の [public method] 
オブ ジェ クト な 文字 列 に 変え る 
オブ ジェ クト の 値 を 返す 

embeds 配列 


(JavaScript1.1 ~) 
プラ グイ ン 関 連 の オプ ジェ クト お よび 配列 。 


【 プ ロ パ ティ 】 

(JavaScriptl.1) 

ength プラ グイ ン の 数 (配列 数 ) 
メソッド 】 

(JavaScriptl.1) 


各 プ ラグ イン 独自 の メソ ッ ド 








0 
WM 


| 還 3 


Date オブ ジェ クト 

日 付 や 時 間 の 取得 や 設定 を 行う オプ ジェ クト 。 
プラ ウザ の 起動 時 に 、 そ の マシ ン か ら 時 間 の 情報 
を 取得 し て 加工 し ます 。 各 マシ ン が 置か れ て いる 
場所 の ロー カル タイ ム を 扱う の で 、CGI で は 難し 
い 世 界 各地 の ロー カル タイ ム に 合わ せ た 処理 を 行 
うこ と が で きま す 。 


【 オ ブ ジ ェクト の 作成 】 

オプ ジェ クト 名 = new Date() 

22 和 ま WjDAEa(7 有 還 コ 
分 秒 り り ai 

オブジェ クト 名 = new Date( 年 , 月 , 日 ) 

オプ ジェ クト 名 = new Date( 年 , 月 , 日 , 寺 
, 分 , 秒 ) 


(JavaScript1.3) 

オプ ジェ クト 名 = new Date (年 月 日, | 
時 [, 分 [, 秒 [, ミ リ 秒 ] ] ] ] ) 1 
オブ ジェ クト 名 = new Date.UTC( 年 , 月 , 了 
日 , [, 時 [, 分 [, 秒 [, ミリ 秒 ]]]]) 


【 用 法 】 
オブ ジェ クト 名 .property 
オプ ジェ クト 名 .method() 


【 プ ロ パ ティ 】 
(JavaScriptl.0) 
な し 


(JavaScriptl.1) 










オブ ジェ クト の ブ プロトタイプ の 作 
成 元 
プロ パテ ィ の 追加 


【 メ ソ ッ ド 】 


(JavaScript1.0) 






日 を 返す (1 一 31) 
曜日 を 返す (0 一 6) 
時 間 を 返す (0 一 3) 





_ ピル トイ ン オ ブ ジ ェクト 











分 を 返す (0 一 59) 

月 を 返す (0 一 11) 

秒 を 返す (0 一 59) 

1970 年 1 月 1 日 0 時 0 分 0 秒 か 
ら の 経過 時 間 を ミリ 秒 単位 で 返す 
グリ ニッ ジ 標 準 時 (GTM) と ロー 
カル 時 間 の 差 を 分 単位 で 返す 
年 を 返す 

指定 され た 日 付 と 時 間 と 1970 
年 ] 月 1 日 0 時 0 分 0 秒 と の 間 
の 時 間 を ミリ 単位 で 返す 

日 付 の 設定 を する 

時 間 の 設定 を する 

分 の 設定 を する 

月 の 設定 を する 

秒 の 設定 を する 

ミリ 秒 単位 で 日 付 と 時 間 の 設定 を 
する 

年 の 設定 を する 

日 付 と 時 間 を グリ ニッ ジ 標 準 時 
(GTM) の 文字 列 に 変換 する 

日 付け と 時 間 を ロー カル タイ ム の 
文字 列 で 返す 

1970 年 1 月 1 日 0 時 0 分 0 秒 
か ら の 経過 時 間 を グリ ニッ ジ 標 準 
時 (GTM) を 元 に ミリ 秒 単位 で 返す 
オブ ジェ クト な 文字 列 に 変え る 


valueOf0 オブ ジェ クト の 値 を 返す 


4 杵 の 年 を 返す 
人 4 桁 の 年 を 設定 する 
ミリ セコ ンド を 返す (0 一 999) 


ミリ セコ ンド を 設定 する 


4 桁 の UTC 時 間 の 年 を 返す 


UTC 時 間 の 月 を 返す (0 一 1 1) 
UTC 時 間 の 日 を 返す (1 一 31) 
UTC 時 間 の 曜日 を 返す (0 一 6) 
UTC 時 間 の 時 間 を 返す (0 一 3) 
UTC 時 間 の 分 を 返す (0 一 59) 
UTC 時 間 の 秒 を 返す (0 一 59) 
UTC 時 間 の ミリ セコ ンド を 返す 


(0-999) 


UTC 時 間 を 文字 列 で 返す 
4 桁 の UTC 時 間 の 年 を 設定 する 


4 桁 の UTC 時 間 の 月 を 設定 する 


4 桁 の UTC 時 間 の 日 を 設定 する 
UTC 時 間 の 時 間 を 設定 する 


UTC 時 間 の 分 を 設定 する 


UTC 時 間 の 秒 を 設定 する 


UTC 時 間 の ミリ セコ ンド を 設定 


する 
オブ ジェ クト の 値 を 文字 列 で 返す 





【 イ ベン ト ハ ンド ラ 】 
な し 


Math オ ブ ジ ェクト 
数 値 計算 関連 の オプ ジェ クト 。「Math」 の 後に 利用 
する プロ パテ ィ や メソ ッ ド を 記述 し て 使用 し ます 。 
それ ら を 組み 合わ せ て 使う こと に よっ て 、 サ ー バ ー 
に デー タ を 渡す こと な く 、 い ろ い ろ な 計算 を プラ 
ウザ で 行う こと が で きま す 。 


只 析 Ha4 





【 プ ロ パ ティ 】 
(JavaScriptl.0) 













(JavaScriptl.1) 
な し 


[メソッド 】 
(JavaScriptl.0) 


(JavaScriptl.1) 


オブ ジェ クト の 値 を 返す 





自然 対数 の 底 
e を 底 と する ら の 自然 対数 
e を 底 と する 10 の 自然 対数 
ら を 底 と する 自然 対数 

10 を 底 と する 自然 対数 

円 周 率 

1/ ら の 平方 根 

ら の 平方 根 


0 か ら の 絶対 値 を 返す 

アー クコ サイ ン を 返す 

アー クサ イン な 返す 

アー クタ ンジ ェ ン ト を な 返す 
座標 か ら 角度 を 返す 

も っ と も 近く て 大 きい 整数 を 返す 
コサイン を な を 返す 

対数 を 返す 

も っ と も 近く て 小さ い 整 数 を 返す 
自然 対数 を 返す 

比較 し て 大 き 数 値 を 返す 
比較 し て 小さ い 方 の 数 値 を 返す 
乗算 を する 

乱数 を 発生 する (Netscape 
Navigator 2.X は UNIX 版 の み ) 
四捨五入 する 

サイ ン を 返す 

平方 根 を 返す 

タン ジェ ント を な 返す 

オブ ジェ クト を 文字 列 に する 


【 イ ベン ト ハ ンド ラ 】 


な し 








string オ ブ ジ ェクト 

文字 列 に 対し て 修飾 や 検索 な どの 操作 を 行う オプ 
ジェ クト 。 文字 列 の 後に プロ パテ ィ や メソ ッ ド を 
付け て 使用 し ます 。 

JavaScriptl.1 か ら 、new 演算 子 を 使っ て 新しく オ 
プ ジ ェ クト を 作成 する こと が で きる よう に な り ま 
し た 。 


【 オ ブ ジ ェクト の 作成 】 
(JavaScriptl.1) 
オプ ジェ クト 名 = new String( 文 字 列 ) 


【 用 法 】 
文字 列 .property 
文字 列 .method () 
【 プ ロ パ ティ 】 
(JavaScriptl.0) 
文字 の 数 
(JavaScriptl.1) 
オブ ジェ クト の 作成 元 
オブ ジェ クト の プロ ト タ イ ブ を 作成 
【 メ ソ ッ ド 】 


(JavaScriptl.0) 






















アン カー を 設定 する 
文字 を 大 きく する 
文字 を 点滅 させ る 
太 文字 に する 
文字 を 抜き 出す 
等 幅 文字 に する 
文字 色 を 指定 する 
フォ ント サイ ズ を 指定 する 
文字 を 検索 する 

斜体 文字 に する 

文字 列 の 後ろ か ら 検索 する 
リン ク を 作成 する 
文字 を 小さ くす る 

削除 文字 に する 

下 付 文字 に する 

文字 列 の 途中 を 抜き 出す 
上 付 文字 に する 

大 文字 を 小文字 に する 





小文字 を 大 文字 に する 
オブ ジェ クト を な 文字 列 に 変え る 


(JavaScriptl.1) 

文字 列 を 分 割る 

オブ ジェ クト の 値 を 返す 
(JavaScript1.2) 


ISO-Latin- 1 の コー ド 番 号 を 返す 
IS0-Latin- 1] の コー ド 番 号 を 文字 
に 直す 

文字 を 抜き 出す (n 番 か ら m 個 の 
文字 ) 

指定 し た パタ ー ン と 同じ パタ ー ン 
を 見 つけ る 

指定 し た パタ ー ン を 置き 換え る 
指定 し た パタ ー ン の 部 分 で 文字 列 
を 分 ける 





(JavaScript1.3) 


toSource0 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
な し 


Array オブ ジェ クト 
(JavaScript1.1) 

配列 を 作成 し 、 操 作 す る オプ ジェ クト 。 複雑 な 手 
順 な し に 配列 が 作成 で きま す 。 

JavaScriptl.1 か ら 追 加 さ れ た オプ ジェ クト で す 。 一 
部 の Netscape Navigator 2.0 か ら 利 用 可能 で す が 、 
正式 な サポ ー ト で は あり ませ ん 。 


【 オ ブ ジ ェクト の 作成 】 

array オブ ジェ クト 名 = new Array (配列 の 数 ) 
array オブ ジェ クト 名 = new 障 iA 
要素 , 1 番目 の 要素 。 . ..,n 番 目 の 要素 ) 


【 用 法 】 
オプ ジェ クト 名 .property 
オプ ジェ クト 名 .method ( ) 


【 プ ロ パ ティ 】 
(JavaScript1.0) 


(JavaScriptl.1) 






配列 の 数 
オブ ジェ クト の 作成 元 
配列 の プロ ト タ イ ブ 







(JavaScript1.2) 










正規 表現 の 一 致 に よっ て 作成 され 
た 配列 の た め の 、 一 致し た 文字 列 
の 0 を 基準 と し た イン デック ス 

正規 表現 の 一 致 に よっ て 作成 され 
た 配列 の た め の 、 正 規 表現 が 一 致 
し た オリ ジ ナ ル の 文字 列 を 反映 


[メソッド 】 
(JavaScriptl.0) 
未 対 応 


(JavaScriptl.1) 









要素 を 文字 列 に する 
要素 の 順番 を 逆 に する 
要素 を ソー ト す る 
オブ ジェ クト を な 文字 列 に 変え る 
オブ ジェ クト の 値 を 返す 


(JavaScriptl.2) 





ふた つの 配列 を 連結 し 、 新 し い 配 
列 を 返す 

配列 か ら 最後 の 要素 を 取り 除き 、 
その 要素 を 返す 

配列 の 最後 へ ひと つ 以 上 の 要素 を 
加え 、 配 列 の 数 を 返す 

配列 の 先頭 の 要素 を 取り 除き 、 配 
列 数 を 返す 

配列 の 一 部 分 を 抜き 出し 、 新 し い 
配列 を 返す 

配列 か ら 要 素 を 加え る か 削除 する 
配列 の 先頭 へ ひと つ 以 上 の 要素 を 
加え 、 配 列 の 数 を 返す 


(JavaScript1.3) 


toSouree0 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
な し 


function オ ブ ジ ェクト 
(JavaScript1.1) 

関数 の 作成 や 操作 を 行う オプ ジェ クト 。 
JavaScript1.1 か ら new 演算 子 を 使っ て 新しい 関数 
の オプ ジェ クト を 作成 で きる よう に な り ま し た 。 
arguments は JavaScriptl.0 か ら 存 在 し まし た が 、 
JavaScriptl.1 か ら 正式 に funcion オプ ジェ クト の プ 
ロ パ ティ に な り ま し た 。 


【 オ ブ ジ ェクト の 作成 】 
オブ ジェ クト 名 = new Function ae 
素 2, . . 要素 n] , Function の 働き ) 


【 用 法 】 
オブ ジェ クト 名 .property 
オブ ジェ クト 名 .method (数 値 ) 


【 プ ロ パ ティ 】 
(JavaScriptl.0) 
未 対応 


(JavaScriptl.1) 
















ファ ンク ショ ン の 要素 (配列 ) 
ファ ンク ショ ン が 何 処 か ら 呼ば れ 
た か 

渡さ れ た ファ ンク ショ ン 配 列 の 要 
素数 

用 意 さ れ て いる ファ ンク ショ ン の 
要素 数 

オブ ジェ クト の 作成 元 

ファ ンク ショ ン の プロ ト タ イ プ ブ 


(JavaScriptl.2) 





ファ ンク ショ ン の 内 容 
用 意 さ れ て いる ファ ンク ショ ン の 
要素 数 

【 メ ソ ッ ド 】 

(JavaScriptl.0) 

未 対応 











(JavaScriptl.1) 


オブ ジェ クト を な 文字 列 に 変え る 
オブ ジェ クト の 値 を 返す 






(JavaScriptl.3) 

異な る オブ ジェ クト を コー ル す る 
異な る オブ ジェ クト を コー ル す る 
( 値 を 引き 渡す こと が 可能 ) 

オブ ジェ クト の 値 を 文字 列 で 返す 





【 イ ベン ト ハ ンド ラ 】 

な し 

Object オ ブ ジ ェクト 

ユー ザー 独自 の 新しい オプ ジェ クト を 作成 する オ 
プ ジ ェ クト 。 


【 オ ブ ジ ェクト の 作成 】 


【 用 法 】 


【 プ ロ パ ティ 】 
(JavaScriptl.0) 
な し 
(JavaScriptl.1) 
オブ ジェ クト の 作成 元 
オブ ジェ クト の ブロ ト タ イ ブ を 作成 
【 メ ソ ッ ド 】 
(JavaScriptl.0) 


ottng0 オブ ジェ クト を な 文字 列 に 変え る 
(JavaScriptl.1) 
5 オブ ジェ クト の 値 を 返す 


(JavaScript1.2) 
プロ パテ ィ を 監視 を 解除 する 
プロ パテ ィ を 監視 する 





(JavaScript1.3) 


to8ouroe0 オブ ジェ クト の 値 を 文字 列 で 返す 








(JavaScriptl.1/JavaScript1.4) 
文字 列 を JavaScript の コー ド と 
し て 評価 する 


※ eval0」 メ ソ ッ ド は 、 元 々 javaScript1.0 で は ビル トイ 
ン 関 数 で し た が 、JavaScript1.1 で メソ ッ ド と な り 、 
JavaScript1.2 で は 再び ビル トイ ン 関 数 に な り 、 さ ら 
に JavaScript1.4 か ら ま た メソ ッ ド に 戻り まし た 。 し 
か し 、JavaScript1.$ か ら は 、 再 度 ビ ルト イン 関数 に 
戻っ て いま す 。 


【 イ ベン ト ハ ンド ラ 】 
な し 


Boolean オブ ジェ クト 
(JavaScript1.1 ^) 

真 (tme) の 値 と 、 偽 (false) の 値 を 作成 する オプ ジェ 
クト 。 


【 オ ブ ジ ェクト の 作成 】 


【 用 法 】 


【 プ ロ パ ティ 】 
(JavaScript1.0) 


(JavaScriptl.1) 
オブ ジェ クト の 作成 元 
オブ ジェ クト の プロ ト タ イ ブ の 作成 


【 メ ソ ッ ド 】 
(JavaScriptl.0) 
未 対応 


(JavaScriptl.1) 
オブ ジェ クト を な 文字 列 に 変え る 
オブ ジェ クト の 値 を 返す 
(JavaScript1.3) 


toSource0 オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
な し 


Number オブ ジェ クト 
(JavaScript1.1 て ) 

最大 値 な どの 属性 を 持っ た 数 値 を 作成 する オプ ジェ 
クト 。 


[オブジェ クト の 作成 】 
オブ ジェ クト 名 = new Number () 


[用 
オク ェクト et prtpsdtyaseda 縛 症 症 吉 中 
オブ ジェ クト 名 .method 。 6 6 
【 プ ロ パ ティ 】 

(JavaScriptl.0) 


(JavaScriptl.1) 











最大 値 を 表す 数 値 
最小 値 を 表す 数 値 

値 数 が 値 で は な いこ と を 表す 
マイ ナス 方 向 の 限界 の 値 。 越え る 
と 「overflow」 を 返す 

プラ ス 方 向 の 限界 の 値 。 越え る と 
「overflow」 を 返す 

オブ ジェ クト の 作成 元 

オブ ジェ クト の ブロ ト タ イ ブ な を 作成 


【 メ ソ ッ ド 】 
(JavaScriptl.0) 
未 対応 


(JavaScriptl.1) 
オブ ジェ クト な 文字 列 に 変え る 
オブ ジェ クト の 値 を 返す 
(JavaScript1.3) 


to8ouree0 オブ ジェ クト の 値 を 文字 列 で 返す 


(JavaScript1.5) 









指数 関数 的 な 記法 の 中 で 数 を 表す 
文字 列 を 返す 

固定 小数 点 式 の 記法 の 中 で 数 を 表 
す 文 字 列 を 返す 

指定 され た 固定 小数 点 式 の 記法 の 
中 で 数 を 表す 文字 列 を 返す 





【 イ ベン ト ハ ンド ラ 】 
な し 


RegularExpression 
(RegExp) オ ブ ジ ェクト 
(JavaScript1.2) 

正規 表現 関連 の オプ ジェ クト 。 


【 オ ブ ジ ェクト の 作成 】 
= new RegExp( 
utulu ub 














【 オ プシ ョ ン (省略 可能 )】 

大 文字 ・ 小 文字 を 無視 
完全 一 致 

大 文字 ・ 小 文字 を 無視 し て 完全 一 致 
複数 の 並び に 一致 











【 使 用 可能 な メタ 文字 】 

次 に 続く 文字 が 通常 に 使わ れ て い 
る 文字 の 場合 、 そ の まま 解釈 され 
ず に 特殊 文字 で お る こと を 示す 。 
次 に 続く 文字 が 通常 特種 文字 と し 
て 使わ れ て いる 文字 の 場合 、 特 殊 
文字 で な いこ と を 示す 
行頭 に 一 至 

行末 に 一 至 

0 回 以上 一 致 

1 回 以上 一 致 (1 と 同じ ) 

0 ある い は 1 回 一 致 
任意 の 文字 と 一 致 
表現 の グル ー プ 化 。 後方 参照 あり 
表現 の グル ー プ 化 。 後方 参照 な し 
x が y に 続く 時 の み 、x に 一 致 

x が y に 続か な い 時 の み 、x に 一 致 
x か y ど ちら か が 一 致 

n 回 一 致 (た と えば 「/pI2I/] で は 、 
"Aple' は 一 致 せ ず 、"Apple" は 完 
全 一 致 、"Appple' は 初め の ふた 
つの '"p' の み 一 致 ) 

n 回 以上 一 致 

n 回 以上 一 致し た 所 より 、 前 m 個 
が 一 致 
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カッ コ 内 の 文字 の どれ で も ひと つ 
と 一 致 (イフ ン の 使用 に より 、 一 
連 の 文字 を 指定 する こと が で きる 。 
た と えば [abc] と [a-c] は 同じ ) 
カッ コ 内 以外 の 文字 と 一 致 

バッ クス ペー ス と 一 致 
スペ ー ス の よう に 、 単語 と の 境界 
と 一 致 

単語 と の 境界 以外 と 一 致 

文字 列 の 中 の 制御 文字 と 一 致 (た 
と えば 「/\cM/」 は 、 文 字 列 内 の 
*control-M" と 一 致 ) 

数 字 と 一 致 ([0-9] と 同じ 。 た と え 
ば 、 "A1'" で は "1 

数 字 以 外 と 一 致 ([^0-9] と 同じ 。 
た と えば 、"A1' で は "A') 

フォ ー ム フィ ー ド と 一 致 

ライ ン フ ィ ー ド と 一 致 

キャ リッ ジリ ター ン と 一 致 

スペ ー ス を 含む 余 白 や タブ 、 

フォ ー ム フィ ー ド と 一 致 
([\f\n\r\t\u00AO\u2028 
\u2029] と 同じ ) 

余 白 以外 の 文字 列 と 一 致 
([^\f\n\r\t\u00AO\u20g 
8\u2029] と 同じ ) 

タブ と 一 致 

バー ティ カル タブ と 一 致 
小文字 ・ 大 文字 も 含む お すべ て の 英 
数 字 と 一 致 ([A-Za-z0-9 ] と 同 
じ 。 た と えば 、 “Apple' で は "A"、 
'"$9.18.' は "9") 

小文字 ・ 大 文字 も 含む お すべ て の 英 
数 字 以 外 と 一 致 ([ へ A-Za-z0-9 ] 
と 同じ 。 た と えば 、 "10096' で は 
"⑳%") 

n 回 目 の 一 致 

"NUL" と 一 致 

ふた つの 16 進 数 文字 コー ド に 
よっ て 表 さ れ た 文字 と 一 致 。 hh 
は 点 た つの 16 進 数 

Unicode の 文字 コード に よっ て 
表 さ れ た 文字 と 一 致 。 hhhh は 4 
つの 16 進数 








【 プ ロ パ ティ 】 
(JavaScript1.2) 





完全 一 致 

大 文字 - 小 文字 を 無視 

次 の パタ ー ン マッ チ を 始め る 位置 
マッ チ さ せる パタ ー ン 

検索 文字 列 の 設定 ・ 変 更 


改行 コー ド を 無視 する か どう か 。 
true( 無 視 し な い ) か false( 無 視 

する ) で 設定 

パタ ー ン が マッ チ し た 最後 の 文字 


バタ ー ン が マッ チ し た 最後 の サブ 
スト リン グ 

パタ ー ン が マッ チ し た も の の 直前 
の 文字 

バタ ー ン が マッ チ し た も の の 次 の 
文字 

バタ ー ン が マッ チ し た も の の 部 
を 蓄え る (9 個 まで ) 

オブ ジェ クト の 作成 元 

オブ ジェ クト の ブロ ト タ イ ブ な 作成 


メソ ッ ド 】 
(JavaScriptl.2) 


ルー プ 文 内 で 使う 3 パターン を 作成 
する 

指定 し た パタ ー ン と 同じ パタ ー ン 
を 見 つけ る 

同じ パタ ー ン が ある か どう か テス 
ト す る 

オブ ジェ クト な 文字 列 に 変え る 


(JavaScripl.3) 
オブ ジェ クト の 値 を 文字 列 で 返す 


【 イ ベン ト ハ ンド ラ 】 
な し 





オプ ジェ クト に 関係 な く 使用 で きる プロ パテ ィ 。 


(JavaScriptl 3) 








無限 大 を 表し て いる 数 値 
数 値 で な い 値 (Not A Number) 
不 確 定 な 値 





ビル トイ ン 関 数 (top-level 関数 ) 


JavaScript に は 、 は じ め か ら 定 義 さ れ て いる 関数 が あり 、 そ れ を ビル トイ ン 関 数 と いい ます 。 
ビル トイ ン 関 数 は 、 オ プ ジ ェ クト に 依存 する こと な く 、 ス クリ プ ト 内 の どこ か ら で も 使用 する こと が 


で きま す 。 


(JavaScriptl.0) 














文字 列 を 整数 に 変更 する 

文字 列 を 浮動 小数 点 に 変更 する 
文字 を ASCI| 形 式 に 変換 する 
(「unescape0」 メ ソ ッ ド の 逆 ) 
ASCII 形 式 を 文字 に 変換 する 
(「escape(] メ ソ ッ ド の 逆 ) 

値 が 数 値 か どう か 判断 する 
文字 列 を JavaScript の コー ド と 
し て 評価 する 


※「eval0」 メ ソ ッ ド は 、 元 々 javaScripll.0 で は ビル トイ 
ン 関 数 で し た が 、JavaScriptl.1 で メソ ッ ド と な り 、 
JavaScriptl.2 で は 再び ビル トイ ン 関 数 に な り 、 さ ら に 
JavaScript1.4 か ら ま た メソ ッ ド に 戻り まし た 。 し か 
し 、 JavaScript1.5 か ら は 、 再 度 ビ ルト イン 関数 に 戻っ 
て いま す 。 


(JavaScriptl.1) 










デー タ 参 照 を 許可 し な いよ うに する 

「taint0]」 メ ソ ッ ド を 無効 に する 

※「tain()] メ ソ ッ ド 、 お よび untaint(0] メ ソ ッ ド は 、 通 
常 の プラ ウザ で は 機能 し ませ ん 。 ま た 、JavaScript1.2 
で は 削除 きれ ま し た 。 


(JavaScriptl.2) 
オブ ジェ クト を 数 に 変換 する 
オブ ジェ クト を な 文字 列 に 変換 する 


(JavaScriptl.3) 
PO 有限 数 か どう か 判断 する 


(JavaScriptl.5) 












encodeURI や 同等 の ルー チン で 
コー ド 化 され た URI を 元 に 戻す 
encodeUHRIComponent や 同等 
の ルー チン で コー ド 化 され た URI 
コン ポー ネン ト を 元 に 戻す 

URI を コー ド 化 する 

URI コン ボー ネン ト を コー ド 化 する 





人 凡 
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JavaScript の 2 ら 000 年 問題 


JavaScript 1.3 で は 、 西 暦 を 4 桁 で 表示 する 「getFullYear0」 メソ ッ ド が 追加 さ 
れ ま し た 。 今後 は 、 な る べく この メソ ッ ド を 使う こと を お 勧め し ます 。 し か し な が 
ら 、 現 時 点 で は JavaScript1.3 に 未 対応 の ブラ ウザ が 多く 出回っ て いる の で 、 
「getYear()] メソ ッ ド を 使わ な けれ ば いけ な い 場 合 も 多い で し ょ う 。 

「getYear0] メソッド は 、 基 本 的 に 西暦 の 下 2 桁 を 取得 する メソ ッ ド な の で 、 
18898 年 は 「99]、2000 年 に な る と 「100」 の 値 を 返し ます 。 し か し 、 厳 密 に 言 
うと JavaScript1.1 で は 、1999 年 まで は 西暦 の 下 ら 桁 を 取得 し 、2000 年 以降 
は 4 桁 で 取得 する よう に 仕様 が 変更 され て いま す 。 この た め 、Netscape Navigator 
3.0 な どの JavaScript1.1 対応 ブラ ウザ で は 、1999 年 まで は 「99」 と ら 桁 の 値 
を 返し ます が 、 ら 000 年 に な る と 「getFullYear()」 メ ソ ッ ド と 同じ よう に 「2000] 
の 値 を 返し ます 。 そ し て 、 さ ら に 複雑 な こと に 、「getFullYear0] メソ ッ ド が サポ ー 
ト さ れ て か ら の 「getYear0]」 メソ ッ ド は 、 再び 2000 年 以降 も 西暦 の 下 ら 桁 を 返す 
よう に 戻さ れ て いま す 。 

つま り 、「getYear0]」 メ ソ ッ ド は 000 年 に な る と 、Netscape Navigator 2.X 
で は 「100」、Netscape Navigator 3X で は 「2000」、Netscape Navigator 4.X 
で は 「100」 を 返す ブラ ウザ と 「2000」 を 返す ブラ ウザ が ある の で す 。 し か も この 


うち Netscape Navigator 4.X で は 、 ど の バー ジョ ン が 「100」 を 返し 、 ど の バー 
ジョ ン が 「2000」 を 返す か は 、0S な ど に よっ て 違い が あり ます 。 

この JavaScript の 2 ら 000 年 に まつ わる 問題 を 回 避 す る に は 、 例 えば 次 の よう な 
方 法 が あり ます 。 


<SCr1p ype="text/ avascript"> 
で ミー ェ 
now = new Date() : 
if ( now.getYear() >= 2000 )({ SM 
ar() , "年 ") } 
else ({ document .write (now .getYear ( ) +1900, "年") } 
の ーー ニテ 
< く / SCr1p セ > 


こう し て お け ば 、 ら 000 年 以降 を 4 桁 で 返す 「getYear0] メソ ッ ド は その まま 表 
示さ れ 、 そ れ 以 外 の 場合 で は 、 取 得 し た 値 に 「1900」 を 加え る こと に よっ て 、4 桁 
の 西暦 に 直し て 表示 され ます 。 

この 方 法 は 、「Date オ ブ ジ ェクト 」 の 「 年 ・ 月 ・ 日 ・ 時 ・ 分 ・ 秒 を 表示 する ]」 
(P.500) や 「 リ アル タイ ム に 年 ・ 月 ・ 日 を 表示 する 」 (P.520) で 使用 し て いま す 。 
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DynamicHTML と は 、 大 雑 把 に いえ ば 、DOM (Document Object Model) を JavaScript 
な どの スク リプ ト を 使っ て 操作 し 、 プ ラウ ザ に 動 的 な 効果 を 与え る 技術 と いう こと に 
な る で し ょ う 。DOM と は 、 ブ ラウ ザ に 実装 され た 機能 や ヤ タ グ が 持つ 属性 や 要素 な ど を 
オブ ジェ クト 化し た 技術 で な の で 、DynamicHTML に 対応 し た プラ ウザ は 、 そ れ に 対 
し て スク リプ ト が アク セス する 手段 が 用 意 さ きれ て いる と いう わけ で す 。 


た と えば 本 書 で は 、 サ ンプ ル 「 背 景 画像 を 変更 する 」(P.400) は 「body」 タ グ の 
「background」 属 性 に 、「alt の 値 を 返す 」(P.469) は 「img」 タ グ の 「altl 属 性 に 、「 画 像 の 高 
さと 幅 を 変更 する 」(P.474) は 「img」 タ グ の 「widmh」 属 性 と 「height」 属 性 に 、「 ス タイ ル シ ー 
ト を 移動 する ](P.494) は スタ イル シー ト の 「left」 属 性 に 、 そ れ ぞ れ JavaScript を 使っ て 
アク セス し 、 値 を 取得 し た り 、 変 更 し た り し て お り 、 こ れ ら は DynamicHTML で ある 
と いう こと が で きま す 。 

DynamicHTML で も 特に スタ イル シー ト は 、 オ プ ジ ェ クト の 位置 や 可視 属性 な ど を 
細か く 設 定 で きる の で 、 そ れ を JavaScript で コン トロ ー ル する こと に より 、 劇 的 な 効果 
を プラ ウザ で 実現 する こと が 可能 で す 。 今 で は 、 単 純 な ブラ ウジ ング の 手助け だ け で 
な く 、DynamicHTML で 作っ て プラ ウザ で 実行 で きる ゲー ム な ども 、 多 数 公開 され て 
いま す 。 


DOM は 、Imnternet Explorer で は バー ジョ ン 4.0 か ら サ ポー ト さ れ て いま す 。 ま た 、 
Netscape で も 6.0 か ら DOM が サポ ー ト され まし た 。 こ れ に と も な い 、Netscape 6.0 で は 、 
JavaScript1.3 以前 の バー ジョ ン で 言う と ころ の ナビ ゲー タオ プ ブ ジ ェクト の 部 分 も DOM 
化 き れ 、DOM の 用 法 を 用 いて オプ ジェ クト を 操作 する こと が 可能 に な っ て いま す 。 

Intemet Explorer4.X の 頃 は 、W3C で DOM の 仕様 が 規格 化 さ れる 前 だ っ た こと も あり 、 
DOM へ アク セス し 、 こ れ を 操作 し て DynamicHTML を 実現 する た め の 方 法 は 、 独 自 色 
の 濃い も の で し た 。 ま た 、 同 じ く DOM の 規格 以前 の Netscape Navigator 4.X も 、 コ ン 
テン ツ の 位置 決め に レイ ヤー か スタ イル シー ト を 、 そ し て オプ ジェ クト の 動き を 
JavaScript で 設定 し て 、 サ イト に 動 的 な 効果 を 与え る こと を DynamicHTML と 言っ て い 
た た め 、Netscape Navigator と Intemet Explorer の DynamicHTML を 実現 する 方 法 に は 、 
違い が あり まし た 。 ま た 、Netscape Navigator 4.X や Internet Explorer 4.X の 頃 は 、 ス タ 
イル シー ト に 関し て も W3C で 仕様 が 規格 化 さ れる 以前 だ っ た こと も あり 、 当 時 は 両方 
の プラ ウザ を 対象 に し た クロ スプ ラウ ザ の DynamicHTML を 作成 する た め に は 、 ス タ 
イル シー ト の 違い に 関し て も 気 を 付け る 必要 が あり まし た 。 

し か し 、 ス タイ ル シ ー ト や DOM の 仕様 が 確定 し た 後に 発表 され た 、Netscape 6.0 や 
Internet Explorer 6.0 以降 か ら は 、 ス タイ ル シ ー ト の 設定 や DOM へ の アク セス は 、 ほ ぼ 
同じ 方 法 で 行う こと が 可能 に な っ て いま す 。 


この よう に 、DynamicHTML は 、 ブ プラ ウザ に よっ て 微妙 な 実装 の 違い が あり 、 こ れ 
ら の プラ ウザ の 実装 の 違い を 吸収 し 、 ク ロス プラ ウザ で 動く DynamicHTML を 作る に 
は 、 ち ょ っ と し た 工夫 が 必要 で す 。 DynamicHTML を 実現 する た め の DOM へ の アク セ 
ス 方 法 に 関し て は 「DOM の 値 を 取得 する 方 法 」(P.654) を 、 ク ロス プラ ウザ 
DynamicHTML を 作る 方 法 は 「 ク ロス プラ ウザ DynamicHTML を 作る に は ](P.656) を 、 
それ ぞ れ 参考 に し て くだ さい 。 


・ 関 連 ペ ー ジ 
| The World Wide Web Consortium | 
(http: / /www . w3 . org/) 


| Gecko DOM reference 」 
(http : / /www .moz111a . org/docs/dom/domref / ) 















3 に * か な さと っ ェ ミ で に d に 
DynamicHTML の ペー ジ を 作成 する た め に は 、DOM に アク セス し 、 そ の 値 を 取得 す 
る 必要 が あり ます 。DOM の 各 要 素 の 値 を 取得 する に は 、「getElementById( ナ オブジェク 
名 )] メ ソ ッ ド を 使う こと に よっ て 可能 で す 。 こ の 時 の オプ ジェ クト の 名 前 の 設定 は 、 
タグ 内 で 「iq] 属 性 を 使っ て 行い ます 。 本 来 な ら 「name」 属 性 も 使 を る は ず な の で す が 、 
現状 で は Internet Explorer と Netscape の どちら で も うま くい か な い 場 合 が ある の で 、 
[iq」 属 性 を 使っ た 方 が よい で し ょ う 。 

た と えば 、 次 の よう に する と 、 イ メー ジオ プ ジ ェ クト に [IMG」 と いう 名 前 を 付け た 
こと に な り ま す 。 





この オプ ジェ クト か ら 、 横 幅 の 「width」 属 性 の 値 を 取得 する に は 、 次 の よう に 記述 す 
れ ば よい で し ょ う 。 


この 「getElementById)] メ ソ ッ ド は 、Intemet Explorer 5.0 と Netscape 6.0 か ら 利用 可 
能 で す 。 

し か し これ が 、DOM の 仕様 が 確定 し て いな か っ た Intemet Explorer4.X で は 、「all( オ 
プ ジ ェ クト 名 )] メ ソ ッ ド を 使っ て DOM の 値 を 取得 する こと に な り ま す 。 た と えば 、 先 
ほど の イメ ー ジ オプ ジェ クト の 場合 は 、 次 の よう に な り ま す 。 


「all0」 メ ソ ッ ド は 、Imtermet Explorer 4.X 以降 の 5.0 や 6.0 など で も 、 引 き 続 き サ ポー 
ト さ れ て いま す 。 

ちな み に 、「iq] 属 性 を 使っ て オプ ジェ クト 名 を 設定 し た 場合 、Netscape Navigator4.X 
で は 、 ス タイ ル シ ー ト 以外 で 、「documenIMG.width] と いっ た よう な JavaScript の 用 法 
を 使用 し た オプ ジェ クト の 値 の 取得 は で きま せん 。DOM の 用 法 と JavaScript の 用 法 を 
混在 し て 使用 する 必要 が ある 場合 は 、 次 の よう に [iq 属性 と 「name」 属 性 の 両方 を 使っ 
て 、 オ プ ジ ェ クト 名 を 設定 すれ ば よい で し ょ う 。 





な お 、 ス タイ ル シ ー ト に 関し て は 、Netscape Navigator 4.X で [idl 属 性 を 使っ て オブ 
ジェ クト 名 を 設定 し て も 、 値 を 取得 する こと が で きま す 。 


DynamicHTML で 動 的 な ペー ジ を 作る 場合 、 見 栄え を 細か く 設 定 す る こと が 可能 な 


スタ イル シー ト を 使っ て 実現 する の は 、 大 変 に 有効 な 手段 と いえ ます 。 ス タイ ル シ ー 
ト の 場合 も 、Interet Explorer 3 メ や 6.X、 Netscape 6.X な ど で は 「getElementByIdO」 メ 
ソ ッ ド を 使っ て 、Internet Explorer4.0 以降 の プラ ウザ は 「all0」 メ ソ ッ ド を 使っ て 値 を 取 
得する こと が 可能 で す 。 

また 、Netscape Navigator 4.X で も 、DynamicHTML が サポ ー ト され て いる こと に な っ 
て いま す 。 し か し その 範囲 は 、 現 在 で は Netscape Navigator 4.X 独自 の 仕様 に な っ て し 
まっ た レイ ヤー や 、 実 装 に 多く の 問題 が ある スタ イル シー ト に 限ら ち れ て いま す 。 そ し 
て 、Netscape Navigator 4.X で は 、「layers[ オ ナオ プ ジェ クト 名 ]| を 使っ て 、 レ イヤ ー や スタ 
イル シー ト の 値 を 取得 する こと に な り ま す 。 

た と えば 、 次 の よう な スタ イル シー ト か ら 、 ス タイ ル シ ー ト の 画面 左端 か ら の 位置 
の 値 を 取得 する 場合 、 それぞれ の プラ ウザ で は 、 次 の よう に し ます 。 

















【 ス タイ ル シ ー ト 】 

<div id="STY1" sty1e="position:absolute: 1efFt:100px: top:50px: width 
:200px: height:150px:background: Tan"> 内 
<b>8STY1 . . .</D> 


</d1Y> 


【Internet Explorer 5.Xー6.X、Netscape 6.X】 
document .getE1ementByTd ( "STY1" ) . sty1e.]1eft 


【Internet Explorer 4.X 一 6.X】 
document .a11 ( "STY1" ) .sty1e.1eft 


【Netscape Navigator 4.X】 
document .]1ayers [ "STY1"] .1eft 


本 書 で は 、「getElementById)」 メ ソ ッ ド や 「all()]」 メ ソ ッ ド を 使っ て DOM の 値 を 取り 
出し た り 、DOM に 値 を 設定 し 直す こと に よっ て ペー ジ の 内 容 を 変化 させ る サン プル を 
いく つか 紹介 し て いま す の で 、 合 わせ て 参考 に し て くだ さい 。 

また 、Netscape Navigator 4.X に お ける スタ イル シー ト の 実装 上 の 問題 に 関し て は 、 
付録 コラ ム 「Netscape Navigator4.X で の スタ イル シー ト の 問題 点 ](P.660) を 参考 に し て 
くだ さい 。 











Go クロ スプ ラ ウ ダ yam し を 人 3 に 


l クロ スプ ラウ ザ DynamicHTML を 作る に は 四 


クロ スプ ラウ ザ の DynamicHTML を 作る 場合 、 ブ ラウ ザ の 種類 や バー ジョ ン を 考慮 
し 、 そ れ ぞ れ に 合わ せ た 用 法 を 用 いた スク リプ ト を 実行 する よう に する 必要 が あり ま 
す 。 プ ラウ ザ の 種類 や バー ジョ ン 、 あ る い は 、 そ の プラ ウザ が どの よう な 機能 を サポ ー 
ト し て いる か を 判断 する に は 、 色 々 な 方 法 が あり ます 。 こ こ で は 、 ぜ 文 の 条件 式 に オ 
プ ジ ェ クト を 設定 する こと に よっ て 、 そ の オプ ジェ クト を サポ ー ト する プラ ウザ で の 
み ス クリ プ ト を 実行 きせ る 方 法 に つい て 解説 し ます 。 こ の 方 法 は 、 本 書 で も クロ スプ 
ラウ ザ DynamicHTML を 実現 する た め に 利用 し て いま す の で 、 そ の サン プル も 見 な が 
ら 解 説 し て いき た いと 思い ます 。 


それ で は 、 才 文 に 設定 する 条件 式 と 、 ス クリ プ ト が 実行 され る プラ ウザ に つい て 見 
で いき まし まう 。 

次 の よう に 、 文 の 条件 式 に 「document.getElementByld] を 設定 し た 時 、 計 文 内 で 設定 
し た スク リプ ト は 、「getElementById0]」 メ ソ ッ ド を サポ ー ト し た プラ ウザ 、 つ まり Imternet 
Explorer 5.0 や Netscape 6.X 以 隆 の バー ジョ ン の プラ ウザ で の み 実 行 され ます 。 


if (document .getE1ementByTd) ( Tnternet Exp1orer 5.X…6.X、NetsCape Ri 
X で 実行 され る スク リブ ト } 


また 、 次 の よう に 症 文 の 条件 式 に 「document.all」 を 設定 し た 時 、 下 文 内 で 設定 し た ス 
クリ プ ト は 、「all0」 メ ソ ッ ド を サポ ー ト し た プラ ウザ 、 つ まり ImtemetExplorer 4.0 以降 
の バー ジョ ン の ブラ ウザ で の み 実 行 さ れ ま す 。 


1E (document .a11 ) { Tnternet Explorer 4.X6.X 以 上 で 実行 され る スク リブ ト } 


さら に 、 次 の よう に 症 文 の 条件 式 に 「documentlayers] を 設定 し た 時 、 文 内 で 設定 し 
た スク リプ ト は 、「ayersll] を サポ ー ト し た プラ ウザ 、 つ まり Netscape Navigator4.0 の プ 
ラウ ザ で の み 実 行き れ ま す 。 


iE (document .1ayers) { Netscape Navigator 4.X で 実行 され る スク リブ ト } 


それ で は 、 実際 に これ ら を どの よう に 使っ て いる か 、「 ク リッ ク し た 位置 へ スタ イル 
シー ト を 移動 する 」(P.497) を 例 に と っ て 、 見 て み ま し ょ う 。 
この サン プル で は 、Tntemet Explorer 5.X ー 6.X 用 、Intemet Explorer 4.0 用 、Netscape 
6.X 用 、Netscape Navigator 4.0 用 に それ ぞ れ スク リプ ト を 用 意 し て いま す 。 


サン プル か ら プ ブラ ウザ の 判断 部 分 の み を 取り 出す と 、 次 の よう に な り ま す 。 














if (navigaEor . appName . charAt ( 0 ) =="M" ) { 
1F (navigator .appVersion .indexOE ( "MSTE 5") != -1 || AM 
ェ .appVersion . indexOf ("MSTE 6") != -1){ 





if (document .getE1ementByTd) { Tnternet Exp1orer 5.0、Tnte 骨 
て ne Explorer 6.0 用 の スク リプ ト } 
} 
else{ 
1f (document .a11 ) { Tnternet Exp1orer 4.0 用 の スク リプ ブ ト } 


} 

if (navigator . appName . charAt ( 0 ) =="N" ) { 
1f (document .getE1ementByTd) { Netscape 6.X 用 の スク リブ ト } 
if (document .1ayers) { Netscape Navigator 4.0 用 の スク リブ ト } 


ここ で は 、 ま ず 始 め に 「ifnavigator.appName.charAt(0)=="M")] と し て 、 ブ ラウ ザ が 
Intemet Explorer で ある 時 の 処理 を 設定 し て いま す 。 そ し て 次 に は 、Intemet ExplorerS.0 
と 6.0 用 の スク リプ ト と IntemetExplorer4.0 用 の スク リプ ト の それ ぞ れ を 用 意 し て いる 
の で 、 こ れ ら の プラ ウザ を 判断 する 必要 が あり ます 。 

そこ で 、「if (nayigator.appVersion.indexOf("MSIE 5") に -18 navigatOr.aDDVersion. 
indexOf("MSIE6") =-1)] と し て プラ ウザ の バー ジョ ン を 判断 する こと に よっ て 、Imternet 
Explorer 5.0 か 6.0 で ある こと を 判断 し ます 。 き ら に [if(document.getElementByld)」 と す 
る こと に よっ て 、Intemet Explorer 3.0 か 6.0 で 、 か つ 「getElementByldO)」 メ ソ ッ ド に 対 
応 し た プラ ウザ の み 「getElementByIdO」 メ ソ ッ ド を 使っ た スク リプ ト を 実行 する よう に 
し て いま す 。 

Imteret Explorer 5.0 や 6.0 は 「getElementByld)] メ ソ ッ ド が サポ ー ト され て いる の で 、 
この 処理 は 一 見 不要 の よう に 思え ます 。 し か し 、 ブ プラ ウザ の 中 に は 、 ユ ー ザ ー エ ー ジ ェ 
ント を ユー ザー 自身 が 設定 で きる も の も あり 、 ま た その プラ ウザ が JavaScript を サポ ー 
ト し て いた と し て も 、「getElementByld)」 メ ソ ッ ド を サポ ー ト し て いる と は 限り ませ 
ん 。 こ の よう な プラ ウザ の 対策 の た め に も 、「if(document.getElementByld)」 の 処理 は 、 
必要 で し ょ う 。 

さら に 、Internet Explorer 4.0 用 の スク リプ ト は 、 次 の 「else」 の 処理 内 の 、 
[if(document.al))」 内 に 設定 し て いま す 。「clse | 内 の 処理 は mtermet Explorer 3.0 で も 実行 き 
れ ま す が 、[if(documentall)」 の 処理 を 入れ て いる の で 、Imtermet Explorer3.0 で は 語文 内 で 設 
定 し た サポ ー ト され て いな い 「all0] メ ソ ッ ド を 使っ た スク リプ ト が 実行 され る こと は あ 
り ま せん 。 

な お 、IntemetExplorer5.0 や 6.0 で も 、[all)」 メ ソ ッ ド が サポ ー ト され て いま す 。 そ の 
た め 、 プ ラウ ザ の バー ジョ ン 判 断 の 処理 を し な いと 、「getElementById()」 メ ソ ッ ド と 
「allO] メ ソ ッ ド の 両方 の 処理 が 実行 され て し まう の で 、 プ ラウ ザ の バー ジョ ン 判 断 の 
処理 は 、 必 ず 行 う よ う に し て くだ さい 。 


Netscape 用 の 処理 は 、|iftnavigator.appName.charAt(0)=="N り 」] と し て 、 プ ラウ ザ が 
Netscape で ある こと を 判断 し た 後に 設定 し て いま す 。 








「getElementByldO0] メ ソ ッ ド に 対応 し た Netscape 6X 用 の スク リプ ト は [if(document. 
getElementByld)」 と し て 、「layers[]」 に 対応 し た Netscape Navigator 40 用 の スク リプ ト 
は 「 ifKKdocumentlayers)] と し て 、 ブ プラウザ が 実行 で きる スク リプ ト を 判断 し ます 。 そ の 
後 、Netscape 6.X 用 に は 「gsetElementById)」 メ ソ ッ ド を 、Netscape Navigator 4.0 用 に は 
[ayers[l」 を 使っ た スクリプト を 、 そ れ ぞ れ 設 定 し て いま す 。 

Netscape 6.X は 「layers[l] を 、 反 対 に Netscape Navigator 4.0 は 「getElementById()] メ 
ソ ッ ド を サポ ー ト し て いま せん 。 こ の た め Netscape で は 、Internet Explorer の よう な 細 
か な バー ジョ ン 判 断 の 処理 は いり ませ ん 。 


以上 の よう な ブラ ウザ の 判断 方 法 は 、 あ くま で も ほん の 一 例 で す 。 プ ラウ ザ や プラ 
ウザ の バー ジョ ン 判 断 の 内 容 は 、 ス クリ プ ト が どの プラ ウザ の どの バー ジョ ン で 実行 
する こと が で きる か 、 あ る い は 実行 し た いか に よっ て 変わ っ て きま す 。 ま た 、 王 文 の 
条件 式 も 「 こ れ が 唯一 の 正解 ] と いっ た も の で は あり ませ ん 。 多 く の ス クリ プ ト を 見 て 、 
色々 と 試し て みる こと を お 勧め し ます 。 


と ころ で 、Imtemet Explorer 5.0 と 6.0 は 「allO]」 メ ソ ッ ド も サポ ー ト し て いる の で 、「 ク 
リッ ク し た 位置 へ スタ イル シー ト を 移動 する ](P.497) の サン プル か ら 、 次 の よう に 
mtemet Explorer 用 に 設定 し た スク リプ ト か ら 「getElementByld)] メ ソ ッ ド を 使っ て 設 
定 し た 部 分 を は ぶ い て も か まい ませ ん 。 


<htm1><head> 
<meta http-equiv="Content-Script-Type" conten="tex / avascr1pt"> 
<meta http-equiv="Content-Style-Type" ConEent="text/Cs8"> 
< 上 it]e></t1t1e> 
<scr1pt type="text/]avasCr1pt"> 
く ! -- 
function eve(e) { 
if (navigator . appName . CharAt ( 0 ) =="M" ) { 
if (document .a11) { 
document .a11 ("STY" ) . sty1e.1eEt=window .event .ofFfFsetX: 


document .a11 ( "STY" ) . sty1e .top=window . event .oFfsetY: 


} 
if (navigator . appName . charAt (0 ) =="N" ) { 
if (document . getE1ementByTd) { 
document . getE1emenEByTd ( "STY" ) . sty1e.1eft=e .DadeX: 
document . getE1emenEByTd ( "STY" ) . sty1e .Eop=e .pageY: 
} 
if (document . 1ayers) { 
document . 1ayers [ "STY"] .1eFt=e .DageX : 
document . 1ayers [ "STY" ] .top=e .padeY: 


} 

document . onmouSedown = eVe: 

『 が つう 

</ SCr1pt> 

<style type="text/csg"> 

で ルコ ュ 

body 【{ background-co1or: #FFFFfFF: } 

マー が 

</sty1e> 

</head> 

<body> 

* ク リッ ク し た 位置 へ スタ イル シー ト を 移動 する 

<d1V 1d="STY" style="position:absolute: width:100px: MA 
1eft:50px: top:50px"> 

<1mg src="1mage.]pg" a1t="1image.Jpg" width="100" height="100"> 
</d1v> 


</body></htm1> 


これ は 、 こ れ 以 外 の 「 ス タイ ル シ ー ト の クリ ッ プ サイ ズ を 変更 する |(P.488) や 「 ス タ 
イル シー ト の 表示 ・ 非 表示 を 切り 奉 え る ](P.491) 、「 ス タイ ル シ ー ト を 移動 する 」(P.494) 
な どの 、IntemetExplorer 用 の スク リプ ト の 中 で [all0] メ ソ ッ ド と 「setElementByld()」 メ 
ソ ッ ド を 使用 し て いる サン プル で も 同じ で す 。 

し か し 本 書 で は 、Intemet Explorer 5.0 以降 の プラ ウザ で 「setElementByld)」 メ ソ ッ ド 
が 使え る こと を 明確 に 示し た か っ た の で 、 あ えて 「all0」 メ ソ ッ ド と 「getElementById0」 
メソ ッ ド の 処理 を 分 け て 設定 し て いま す 。 


さき て 、 こ の 症 文 の 条件 式 に オプ ジェ クト を 設定 する こと に よっ て 、 そ の オプ ジェ ク 
ト を サポ ー ト する プラ ウザ で の み ス クリ プ ト を 実行 させ る テク ニッ ク は 、 何 も 
DynamicHTML の 時 の み に 有 効 な 手段 と いう わけ で は あり ませ ん 。 た と えば 、 次 の よ 
うに 文 の 条件 式 に Image オプ ジェ クト を 設定 する と 、 王 文 内 に 設定 し た スク リプ ト 
は 、Netscape Navigator 3.0 以 降 、 あ る い は Internet Explorer 3.0 以 降 と いっ た 
JavaScriptl.1 に 対応 し た プラ ウザ で の み 、 実 行き れる こと に な り ま す 。 


if (document . images) { JavaScript1 . 1 に 対応 し た プラ ウザ て 実行 され る スク リプ ト } 


HTML4.0 か ら は 、「scripl タ グ の 「language」 属 性 は 、 不 適切 と され て いま す 。 こ れ に 
より 、 付 録 コ ラム 「JavaScript の バー ジョ ン 記 述 に よる エラ ー 回 避 ](P.667) で 紹介 し た よ 
うな 、「language」 属 性 に JayaScript の バー ジョ ン を 記述 する こと に よる エラ ー 回 避 よ り 
も 、 今 後 は 、 こ こ で 紹介 し た 正文 の 条件 式 に 実行 する スク リプ ト が サポ ー ト し て いる オ 
プ ジ ェ クト を 設定 する こと に よっ て 行う エラ ー 回 避 が 、 主流 に な っ て くる こと で し ょ う 。 














600 Neape avger 2k て の メタ イル シー ト の 間 


引 Netscape Navigator 4.X で の スタ イル シー ト の 問題 点 四 


Netscape は 、Netscape Navigator 40 か ら ス タイ ル シ ー ト が サポ ー ト され まし た 。 し 
か し 、 Netscape Navigator4.X の スタ イル シー ト の 実装 = に は いく つか の 間 題 が あり 、 背 景 
色 や 背景 画像 の 表示 が うま く 行 えな い の で 、 注 意 し て くだ さい 。 





た と えば 、 次 の スタ イル シー ト を Internet Explorer や Netscape 6.0 と Netscape Navigator 
4.X で 実行 し た 場合 、 


<div 1d="STY1" sty1e="position:absolute: Eop:50px: 1eft:50px: Dackgr 
ound :Green"> < 
<D> 

position:absolute:1eft: 200px: top:50px: background:Green 

く /D> 

< く D> 

position:absolute:1eft: 200px: top:50px: background:Green 

く /p> 


</d1V> 


Internet Explorer 6.0 


NG USE で いり あり 
強 um01.html - Microsoft jnternet Explorer 
アイ ル (P) 講 集 E) 表示 お 気 に 和 0⑯ ツール CD ヘル ガ ⑪ 


@ 京 ・ の 回 還る の ms 実 5m29 細 デ の 


um01.html - Netscape 








Tnternet Explorer や Netscape 6.0 で は 、 行 と 行 の 間 も ス タイ ル シ ー ト で 設定 し た 背景 
色 に な り ま す が 、Netscape Navigator4.X で は 、 文 字 の 後ろ し か 背景 色 が 変わ ら ず 、 ま だ 
ら に な っ て し まう こと が わか る と 思い ます 。 

さら に この 問題 は 、 次 の サン プル の よう に 、「width:] と 「height:] を 使用 し て スタ イル 
シー ト の サイ ズ を 明示 的 に 設定 し て も 発生 し ます 。 


<div 1d="STY1" sty1e="position:absolute: top:50px: 1eft:50px: width 
:400px: he1ght:200px: Dackqground:Green"> 骨 
<Dp> 

position:absolute: top:50px: 1eft:50px: 

< く /p> 


<D> 


width:400px: height:200px: background : Green 
く /p> 


く /d1 マ > 


Gtd9 の いり (りつ ま リリ 


zun0z html 


いり い り ま りん 4 


um02.html - NM 
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Internet Explorer や Netscape 6.0 で は 設定 通り に 幅 100 ビク セル で 高き 200 ピク セル の 
スタ イル シー ト 全 体 の 背景 色 が 表示 され ます が 、Netscape Navigator4.X で は 、 背 景色 が 
変る の は 文字 が ある 部 分 の み で す 。 


また 、 次 の サン プル は 、 本 文中 の サン プル 「 ス タイ ル シ ー ト の 情報 を 取得 する 」(P.482) 
に <meta> を 設定 し た も の で す 。 し か し 、 こ の よう に 文字 だ け の スタ イル シー ト の 場 
合 、Netscape Navigator4.X で は 、 ス タイ ル シ ー ト の 部 分 が 表示 され な いり 場合 が あり ます 。 








<html> 
<head> 
<meta htEp-equ1v="Content-Script-Type" content="Eext/]avascript"> 


<meta htEp-equiv="ConEenE-Sty1e-Type" content="text/css"> 
<it1e>sum03 .htm1</ 上 iE]e> 


<SCr1pt type="Eext/]avascrip 上 "> 


に ーー コ 
Function StyValue ( ) { 


1f (navigaor . appName . charAt ( 0 ) =="M" ) { 





if (document .a11) { 


alert ( "画面 左 か ら の 位置 : "+document . a11 ( "STY1") 人 | 
m+ 


INITIE it 


"画面 上 か ら の 位置 : "+document .a11 ( "STY1" ) .sty1e.top+" 剛 
ぎ ま m"+ 


"横幅 : "+document .a11 ( "STY1" ) . sty1e . Width+" ま n"+ 
" 高 さ : "+document .a11 ("STY1" ) . sty1e .height ) 


Netscape Navgstor 4X で の スタ イル シー ト の 財 点 661 





付 
録 
思 
ラ 
ム 


ュ f (navigaor . appName . CharAt ( 0 ) =="N" ) { 
if (document . getE1emenEByTd) { 
a1ert ( "画面 左 か ら の 位置 : "+document . getE1ementByTd ( "STY1" ) . 
Style . ef 上 +" ま mn"+ 
"画面 上 か ら の 位置 : "+document . getE1ementByTd ( "STY1" ) . 
gty1e .top+" ま mn"+ 
"横幅 : "+document . getE1ementByTd ( "STY1" ) .sty1e .wid 
th+ " ま m" 
" 高 さ : "+document .getE1ementByTd ( "STY1 " ) .sty1e .hei 


| ニラ 


ght) 
} 
if (documenE . 1ayers) { 
a1ert ( "画面 左 か ら の 位置 : "+document .1ayers [ "STY1"] .1eFt+"\ ま nm"+ 
"画面 上 か ら の 位置 : "+document . 1ayers [ "STY1" ] .top) 


} 
0 ピー 


</ Cr1p ヒ > 


</head> 
<body bgco1or="#FFFFFEF "> 
* ょ スタ イル シー ト の 情報 を 取得 する 
<diy 1d="STY1" styl1e="position:absolute: 1eft:100px: 2 
width:200px: height:150px:Dackground: Tan"> 
<b>8TY1 . . .</b> 
</d1V> 
<d1v 1d="STY2" sty1e="position:absolute: 1efFt:100px: top:210px"> 
< く form> 
<input type="button" value=" ス タイ ル シ ー ト の 情報 " onC1ick="StyValue ( ) "> 
</ Eorm> 
< く /d1> 
</body> 
</htm1> 








Internet Explorer 6.0 





* ス タイ ル シ ー ト の 情報 を 取得 する 


Netscape N 


・ ス ライル シ ー ト の 情報 を 取 情 する 








これ ら の 間 題 を 回 避 す る た め は 、「 ス タイ ル シ ー ト と 同じ 大 き さ の 画像 を スタ イル 
シー ト に 設定 する 」「 プラ ウザ を 判断 し て 、Netscape Navigator4.X の 場合 は レイ ヤー で 、 
それ 以外 の 場合 は スタ イル シー ト で ペー ジ を レイ アウ ト す る 」 な どの 方 法 が あり ます 。 


※ こ れ ら の サン ブル の ソー スコ ー ド は 、 サ ポー トペ ー ジ で 配布 し て いる サン プル ファ イル の 「js」-「column」 一 
「nn_css」 の 中 に 「sum01.htm」-「sum03.htmll と し て 収録 し て あり ます 。 












』 JavaScript の I 


JavaScript の ソー ス 上 に 問題 が あっ た 場合 、 問 題 の 種類 と 問題 が 起こ っ た 場所 が 、 
Internet Explorer の 場合 は エラ ー ウ ィ イン ドウ 、Netscape の 場合 は JavaScript コン ソー ル 
に 表示 され ます 。 JavaScript で スク リプ ト を 組む 時 に は 、 こ の 情報 を 元 に デバ ッ グ し て 
いく こと に な り ま す 。 し か し な が ら 、 こ の ウィ ンド ウ で 指摘 され て いる 問題 が あっ た 
場所 は 、 実 際 に は この 場所 と 別 の 場所 に 不具 合 が あっ た た め に エラ ー が 引き 起こ され 
る 場合 あり ます の で 、 気 を 付け て くだ さい 。 

著者 の 経験 上 で スク リプ ト 作 成 時 に 起こ し や すい ミス を まとめ て み ま し た 。 ブ ラウ 
ザ で チェ ッ ク す る 前 に 、 以 下 の 項 目 を も う 1 度 確認 し て みて くだ さい 。 


記述 上 の ミス 

・ 名 称 の スペ ルミ ス 
関数 名 や 変数 名 は 、 ユ ー ザ ー が 規定 の 範囲 内 で 自由 に 定義 する こと が で きま す が 、 
スク リプ ト を 書い て いる 途中 で スペ ル を 間違え た り 、 抜 か し て し まう こと が よく あ 
り ま す 。 ま た 、 大 文字 ・ 小 文字 も 区 別 す る の で 、 そ の 点 に も 注意 が 必要 で す 。 


ミ す ュー りす 9 タマ 


・ オ ブ ジ ェクト の 階層 の ミス 

ナビ ゲー タオ プ ジ ェ クト に は 、 オ プ ジ ェ クト に 階層 関係 が あり 、 そ れ ら を 使用 する 
時 は 、 そ の 階層 関係 を 間違え ず に 記述 し て 使用 する 必要 が あり ます 。 特に Text オ ブ 
ジェ クト な ど 、 階 層 の 下 の 方 に ある オプ ジェ クト で は 、 途 中 の オプ ジェ クト の 記述 
忘れ や 順番 間違い に 気 を 付け て くだ さい 。 


・ オ ブ ジ ェクト 名 ・ 関 数 名 ・ 変 数 名 の 付け 方 の 注意 

オプ ジェ クト 名 ・ 関 数 名 ・ 変 数 名 に は 、 自 分 が 見 て わか りや すい 名 前 を 付け る よう に 
し まし ょ う 。 ま た 、 こ れ ら に 同じ 名 前 を 使っ て し まう こと が 、 意外 と 多い よう で す 。 
スク リプ ト が 動か な い 場合 は 、 こ の 点 に も 注意 し て チェ ッ ク す る と よい で し ょ う 。 


・ 関 数 名 ・ 変 数 名 の 取り 違え 
長い スク リプ ト を 書い て いる 時 に 、 特 に 変数 名 な ど は 、 値 の 代入 を 繰り 返し て いく 
うち に 、 ど の 変数 に どの 値 が 代入 され た か が 、 こ ん が ら が っ て し まう こと が あり ま 
す 。 こ れ ら の 名 称 は 、 自 分 自身 が 見 て わか りや すい 名 称 を 設定 する こと を お 勧め し 
ます 。 ま た 、 複 雑 な 処理 を し て いる と ころ で は 、 ど うい う 処 理 を し て いる か を コメ 
ント に 書い て お く の も よい で し ょ う 。 


・ 関 数 名 の ダブ リ 
ひと つの HTML ファ イル 内 に 同名 の 複数 の 関数 が ある 場合 、1 番 最後 に 記述 され た 
関数 の み 動作 し 、 他 の 関数 は 無効 に な っ て し まい ます 。 











・ 呈 て "な どの カッ コ や "一 "の 閉じ 忘れ 
処理 文 が 長く な っ た り 、 何 重 に も ネス ト ( 入 れ 子 ) させ て いる と 、 処 理 文 を 閉じ る 「」] 
を 付け 忘れ た り 、 間 違っ た 所 に 付け て し まう こと が よく あり ます 。 各階 層 ご と に 自 
落 を 下げ た り 、 コ メン ト を 付け る な どの 工夫 を する こと を お 勧め し ます 。 ま た 、 文 
字 列 を 閉じ る 「"] な ども 、 文 字 列 が 長く な っ た り 、 変 数 と 一 緒 に 使っ た り し て いる 
と 、 う っ か り 付 け 忘 れ て し まい が ち で す 。 








・" と ' の ネス ト ( 入 れ 子 ) の 間違い 
"| で 括 ら れ た 文字 列 内 で は 、「"」 を 使わ ず 「"」 を 使用 し ます 。 う っ か り 「"] を 使っ 
て し まう と 、JavaScript は そこ で 文字 列 が 終わ っ た と 判断 し 、 エ ラー に な っ て し まい 
ます 。 特に イベ ント ハン ドラ 内 で 、 文 字 列 な ど を 設定 する 時 に 間違え て し まい が ち 
で す の で 、 注 意 が 必要 で す 。 


・「=」 で は な く 「== 
JavaScript で は 、 左 右 の 値 を 評価 し て 値 が 同じ で ある こと を あら わす 時 は 、「 値 A = 
値 B] で は な く 「 値 A == 値 B] と 記述 し ます 。 


文字 コー ド 上 の 問題 

・「 表 示 」「 予定] な どの 文字 化け する 文字 に よる エラ ー 
「document.write()」 で 文字 を 書き 出し た 時 に 文字 化け する だ け で な く 、 文 字 の 組み 
合わ せ に よっ て は エラ ー に な っ て し まう 場合 が あり ます 。 


・ ス ペー ス な の に | 不正 な "@" が あり ます | と 言わ れ た 時 
スペ ー ス の 表現 に 半角 スペ ー ス や 全角 スペ ー ス 、 タ プ を 混在 し て 使用 し て いる 時 、 
何 も 問題 が な い は ず な の に 、 文 字 コ ユー ド の 関係 で 「 不 正 な @ が あり ます (英文 )] と い 
う エ ラー が 出る 時 が あり ます 。 こ の 問題 を 回 避 す る た め 、 ス ペー ス を 空け る 時 に は 、 
半角 英 数 の スペ ー ス に 統一 し て 使用 する こと を お 勧め し ます 。 ま た 、 不 要 な スペ ー 
ス は 極力 削除 し て お く こ と も お 勧め し ます 。 


レイ アウ ト 上 の 問題 

・ 大 きめ の 画像 の 後に JavaScript を 記述 し た 時 
Netscape Navigator 2.X で は 、 大 き な 画 像 ファ イル や カウ ンタ ー な どの 表示 に 時 間 が 
か か る も の が ある と 、 そ れ 以 降 の JavaScript が 動か な い 場 合 が あり ます 。 こ の 問題 
は 、 画 像 ファ イル の 前 に スク リプ ト を 記述 し た り 、「wiqth」 属 性 や 「height」 属 性 を 指 
定 す る こと に よっ て 、 ほ ぼ 解 決 さ れ ま す 。 


・ テ ー ブ ル 内 や テー ブル 後に JavaScript を 記述 し た 時 
テー ブル 内 、 あ る い は テー ブル の すぐ 後に JavaScript を 記述 し た 時 も 、 ス クリ プ ト 
が 動か な い 場合 が あり ます 。 こ の 問題 は 、Netscape Navigator 2.X や 3.X で 見 られ 、 
テー ブル の サイ ズ に 余裕 を 持た せ た り 、 テ ー ブ ル より 前 に スク リプ ト を 記述 する こ 
と に よっ て 、 ほ ば ぼ 解 決 さ れ ま す 。 








・ ア ニメーション GIF と 同時 に 使用 する 時 の 注意 
Netscape Navigator 2.X で 、 ア ニメーション GIF と JavaScript を 同時 に 使用 し て いる 
ペー ジ を 見 た 場合 、 ペ ー ジ の 読み 込み が 途中 で 止ま っ た り 、 ブ ラウ ザ が 不安 定 に な っ 
て シス テム エラ ー な ど を 引き 起こ す 場合 が あり ます 。 こ の 問題 は 、Netscape Navigator 
3.0 で は 解決 し て いま す が 、 そ れ 以 前 の ブラ ウザ を 対象 に し た ペー ジ で は 、 ア ニ メ ー 
ショ ン GIF と JavaScript の 同時 使用 は 避け た 方 が よい で し ょ う 。 


「window.open()」 を 使用 する 時 の 注意 

・ 開 いた ウィ ンド ウ に 文字 が 記述 され な い ・ 最 後 の 1 行 が 表示 され な い 
「window.open()」 で 開い た ウィ ンド ウ に 「document.write()」 で 文字 を 書き 出し た 時 、 
「documentclose0] で ドキ ュ メ ント スト リー ム を 明示 的 に 閉じ て いな いと 、 全 く 表 示 
され な か っ た り 、 最 後 の 1 行 が 表示 され な か っ た りす る 場合 が あり ます 。 


・「window.open()」 で 開い た ウィ ンド ウ 内 の 画像 は フル パス で 
「window.open()」 で 開い た ウィ ンド ウ に 画像 ファ イル を 表示 させ る 時 、Nctscape 
Navigator2.X な どの 一 部 の プラ ウザ で は 、URL を フル バス で 指定 し て いな いと 画像 
が 表示 され な い 場 合 が あり ます 。 


デバ パック 時 の Tips 

・「setTimeout()」 メ ソ ッ ド は 時 間 設定 を 大 きめ に し て テス ト す る 
リア ル タ イ ム の 時 間 表 示 や アニ メー ショ ン す る JavaScript の よう な 、 一 定時 間 に 処 
理 を 繰り 返す スク リプ ト 中 に ミス が ある と 、 エ ラー を 表示 する ウィ ンド ウ が 繰り 返 
し 出 て 、 ど うし よう も な い 状 態 に な る 時 が あり ます 。 こ の よう な スク リプ ト を デバ ッ 
ク す る 時 に は 、 繰 り 返 し 時 間 の 設定 を 長め に し て 、 問 題 が な く な っ て か ら 設 定時 間 
を 短く する こと を お 勧め し ます 。 


・ ブ ラウ ザ は 1 度 終了 させ て か ら 
キャ ッシュ 機能 が 働く た め 、 ブ プラ ウザ の [更新 (Reload)] ボ タン を 押し た だ け で は 、 
HTML ファ イル が 更新 され な い 場 合 が あり ます 。 も し 記述 ミス や 構文 ミス が 何 も な 
い の に まだ エラ ー が 出る 時 に は 、1 度 プラ ウザ を 終了 させ て か ら フ ァイル を 読み 込 
み 直 し て みて くだ さい 。 





き JavaScript の バー ジョ ン 記 述 に よる エラ ー 回 避 月 


<script> 内 の 「language」 属 性 の 指定 で 、「language=JavaScript1.1] や |「language= 
JavaScript1.2] と いっ た 具合 に JavaScript の バー ジョ ン を 記述 を すれ ば 、 ペ ー ジ を 読み 
込む 時 に 、 そ の バー ジョ ン の プラ ウザ で は 未 対応 の JavaScript が 記述 し て あっ て も エ 
ラー に な る こと は あり ませ ん 。 

し か し この まま で は 、 イ ベン ト ハ ンド ラ で イベ ント を 発生 させ た 時 な ど に エラ ー を 
こし て し まう 場合 が あり ます 。 こ の よう な 問題 を 回 避 す る た め の ひ と つの 方 法 と し 
て 、 ダ ミー の スク リプ ト を 設定 する と いう 方 法 が あり ます 。 

た と えば 、「Image オプ ジェ クト 」 の 「 ア ニメーション に スタ ー ト ボタ ン と スト ッ プ ボ 
タン を 付け る 」(P.458) の 場合 、 こ の まま Image オブ ジェ クト に 未 対 応 の Netscape 
Navigator 2.X の ブラ ウザ で この ペー ジ を 見 る と 、 ペ ー ジ の 読み 込み 時 に は 何 も 起 こら 
な い の で す が 、[ ス ター ト ] あ る い は [スト ッ プ ] ボ タン を 押し た 途 端 、 エ ラー 表示 の ウィ 
ンド ウ が 開い て し まい ます 。 

この よう な 場合 、 次 の よう に 、「language」 属 性 を 使い 、 さ ら に 画像 ファ イル を アニ 
メー ショ ン さ せる スク リプ ト の 前 に 、 何 も し な い ダ ミー の スク リプ ト を 記述 する と 、 
Netscape Navigator 2.X で は 「language」 属 性 が JavaScriptl.1 の スク リプ ト に は 反応 し な 
い の で 、 ダ ミー の スク リプ ト が 評価 され 、 エ ラー 表示 の ウィ ンド ウ は 表示 され ませ ん 。 


<script 1anguage= "JavaScript"> 

く ! ニー 

Eunction anime_2(){ } 

function stop()( } 

// ニ ュ ッ 

</ SCript> 

<script 1anguage="JavaSocript1 .1"> 
< く ! ニ ニー 

var TimeSet1 = 500 : 

var ITmageSetA = 1 : 


0 


また 、Netscape Navigator 3.0 以上 の プラ ウザ で は 両方 の スク リプ ト が 認識 され ます 
が 、 同 じ 関 数 名 が あっ た 場合 、 よ り 後 に 記述 され た 関数 が 評価 され る の で 、 正 常に ス 
クリ プ ト が 実行 され ます 。 

も ちろ ん 、 ダ ミー の 部 分 に Netscape Navigator 2.X 用 の 処理 を 設定 し て も か まい ませ 
ん 。 本 書 で は 、 こ の 他 に も 、 プ ラウ ザ の 種類 や バー ジョ ン に よっ て ペー ジ を 振り 分 け 
る な どの 方 法 を 紹介 し て いま す の で 、 そ ちら も 参考 に し て くだ さい 。 











Netscape Navigator 4.06 か ら JavaScript1.3 が サポ ー ト され た の と と も に 、 今 まで 問題 
が ある JavaScript の コー ド を 含ん だ HTML フ ァイル を ブラ ウザ で 読み 込ん だ 時 に 表示 
され て いた 、JavaScript Eror の ウィ ンド ウ が 表示 され な く な り ま し た 。 

この 対応 は 、 ネ ッ ト サ ー フ ィ ン を し て いる 最 中 に 、 ユ ー ザ ー は 何 も 悪 く な い の に 突 
然 エ テー ウィ ンド ウ が 表示 され る こと が な く な っ た と いう こと な の で 、 ユ ー ザ に 対し 
て は 適切 な 対応 と いえ ます 。 





な お 、JavaScript の 動作 チェ ッ ク を する 場合 な ど は 、 ロ ケー ショ ン バ ー に 「javascript:」 
と 打ち 込ん で 開く コン ソー ルウ ィ ン ド ウ に 、 エ ラー が 発生 し た 時 の エラ ー の 発生 場所 
や 内 容 が 表示 され る の で 、 こ れ で デバ ッ ク を 行う こと に な り ま す 。 ま た 、「Netscape 
Preferences] フ ァイル に 以下 の 1 行 を 追加 し て お く と 、JavaScriph エ ラー が 発生 し た 時 
に 、 自 動 的 に エラ ー 内 容 を 表示 し た コン ソー ルウ ィ ン ド ウ が 開く よう に な り ま す 。 


JavaScript の デバ ッ ク を 行う こと が 多く 、 コ ン ソ ー ル ウィ ンド ウ は 常に 表示 され る よ 
うに な っ て いて 欲し い の で あれ ば 、 こ れ を 設定 し て お く の も よい で し ょ う 。 ま た 、 
「Netscape Preferences」 の 設定 で コン ソー ルウ ィ ン ド ウ を 開く よう に 設定 し た 後 も 、 以 
下 の よ うに 「false」 を 設定 する こと に より 、 コ ン ソ ー ル ウィ ンド ウ を 開か な いよ うに す 
る こと が で きま す 。 


な お 、Netscape 7.X 以降 の Mozilla、Firefox を 含め た 、Mozilla 系 の ブラ ウザ の 場合 
は 、[ タ スク ] 一 [ツー ル ] 一 [Web 開発] 一 [JavaScripb コン ソー ル ] と いっ た よう 
に 、 メ ニュ ー か ら の 選択 で も 、 コ ン ソ ー ル ウィ ンド ウ を 開く こと が で きま す 。 


Windows 版 の Internet Explorer の 場合 は 、、 エ ラー が ある と 、 ウ ィ ン ド ウ の 左下 に [ 
マー ク が 表示 され る と と も に 、 エ ラー ウィ ンド ウ が 開き ます 。 エ ラー ウィ ンド ウ の [ 詳 
細 の 表示 ] ボ タン を クリ ッ ク す る と エラ ー の 詳細 が 表示 され 、 ボ タン が [詳細 を 隠す ] に 
変わ り ま す 。 そ の [詳細 を 隠す ] ボ タン を クリ ッ ク す る と 、 エ ラー の 詳細 が 隠れ ます 。 
エラ ー ウ ィ ン ド ウ 内 の 「 ペ ー ジ に エラ ー が ある 時 は 、 こ の エラ ー メ ッ セ ー ジ を いつ も 表 
示す る 」 の チェ ッ ク ボ ックス の チェ ッ ク を 外す と 、 ペ ー ジ に エラ ー が あっ て も エラ ー 
ウィ ンド ウ が 開か な く な り ま す 。 し か し 、 こ の 場合 で も 、 ウ ィ ン ド ウ の 左下 に [マー 
ク が 表示 され る の で 、 そ こ を ダブ ルク リッ ク す る こと に よっ て 、 エ ラー ウィ ンド ウ を 
表示 する こと が 可能 で す 。 

また 、Macintosh 版 の mternet Explorer の 場合 は 、「 初 期 設 定 ] の 「Web コン テン ツ 」 の 
項目 か ら 、「 ア クティ プ コ ン テ ン ツ 」 に ある 「 ス クリ プ ト エ ラー の 警告 を 表示 」 の チェ ッ 
クボ ックス の チェ ッ ク を 外す と 、 エ ラー ウィ ンド ウ の 表示 を 停止 する こと が で きま す 。 





』 。 JavaScript1.2 で 追加 ・ 変 更 さ れ た 用 法 四 


ここ で は 、 JavaScript1.2 で 追加 ・ 変 更 さ れ た 用 法 の うち 、 本 文中 で 解説 し きれ な か っ 
た 事柄 に つい て 、 ま と め て いま す 。 


追加 ・ 変 更 さ れ た Array オブ ジェ クト の 用 法 
次 の 用 法 で 配列 を 作成 で きる よう に な り ま し た 。 





【 用 法 】 


配列 名 = [e1ement0, el1ement1, ..., elementn] 


サン プル は 、「Array オプ ジェ クト 」 の 「 配 列 の 要素 を 文字 列 に し て 書き 出す ](P.S64) 
の サン プル を 、 こ の 用 法 を 使っ て 書き 直し た も の で す 。 


<script 1anguage="JavaScript1 .2"> 

に ニニ 

hairetu= ["0 番 目 ", "1 番目" , " 2 番目 " , " 3 番目 "] : 
document .write(hairetu.]oin("/") ) : 

7 に ニ ィ っ 


</ SCr1pt> 


また 、 次 の サン プル の 場合 、JavaScript1.2 以前 で は 「undefined] と な り ま す が 、 
JavaScriptl.2 で は 「1」 と 値 を 返す よう に な り ま し た 。 


<SCript 1anguage="JavaSoript1 .2"> 
3 と エコ 

a = new Array (1 ) 

document .write(a[0] ) : 

ん ニー の 


</ Script> 


変更 され た toString の 値 


オプ ジェ クト を 文字 列 に 変換 する 「toSring)」 メ ソ ッ ド を JavaScriptl.2 で 使用 する と 、 
JavaScript1.2 で 追加 され た オプ ジェ クト や 配列 の 形式 で 書き 出さ れ ま す 。 

た と えば 、 下 の サン プル の 場合 、 書 き 出さ れる 文字 列 は 、「[object Objectl] と な ら ず 
に 「{colorired, size:2.2]] と な り ま す 。 


<script 1anguage="JavaScr1pt1 .2"> 
で ! ニー 
mystring = new Object( ) 


mysEring.color = "red": 











四 
還 
ラ 
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myString.Size = 2.2: 
document .write (mysEring .toStrimg( ) ) : 
7 と 3 


< く / SCr1p キ > 


変更 され た Number オブ ジェ クト の 用 法 


下 の サ ンプ ル の よう に 「Number0」 メ ソ ッ ド で 数 値 以外 の 値 を 設定 する と 、Netscape 
Navigator 4.0 以前 の プラ ウザ で は エラ ー に な り ま す が 、 JavaScript1.2 に 対応 し た 
Netscape Navigator 4.0 か ら は 、「NaN」 の 値 を 返す よう に な り ま し た 。 


<SCrip 1]anguage= "JavaScript"> 
マト 

x = Number ("one") 
document . write (x) : 

(の / こ ョ ッ 


< く / SCr1pt> 


変更 され た string オ ブ ジ ェクト の 用 法 


文字 列 を 分 割 す る [split0] メ ソ ッ ド を JavaScript1.2 で 使用 する と 、「 文 字 区 spli(" ] 
と し て スペ ー ス で 分 割 す る よう に 指定 し て も 、 タ プ ブ ・ 改 行 な ど の 特殊 記号 や 、 複 数 の 
スペ ー ス な ど が 認識 され る よう に な り ま し た 。 

た と えば 、 下 の サン プル を JavaScript1.2 で 実行 し た 場合 、 結 果 は 「["Welcome", "To", 
"My", "Home"。"Page"]」 と な り 、 そ れ 以 前 の バー ジョ ン の JavaScript で は 「Welcome,.To, 
My,,,Home, Page 」 と な り ま す 。 


moz11="Welcome To \nMy Home \nPage" 
a=moz11 .sp11t(" ") 


document .write (a) 


文字 列 の 途中 の 文字 を 抜き 出す 「subsring0] メ ソ ッ ド は 、 JavaScriptl.2 で 使用 し た 時 
は 設定 され た 値 を 厳 審 に 判断 する よう に な り ま し た 。 

た と えば 、 次 の サン プル を JavaScript1.2 で 実行 し た 場合 、 抜 き 出す 先頭 の 文字 の 値 
を 0 以下 の 数 値 に 設定 し た り 、 抜 き 出 す 先頭 の 文字 より 抜き 出す 終了 位置 の 文字 を 大 
き な 数 値 に 設定 し た 時 は 、 エ ラー に な り ま す 。 


var moz11 = "Welcome To My Home Page": 

Yar moz12 = "よう こそ 私 の ホー ムペ ー ジ へ ": 
document .write (mozi1 . substring ( -2, 12 ) ) : 
document .write ( "<br>" ) : 


document .write (moz12 . substring (12,8) ) : 


(70 Jeweofpt で 守れ た 


RegularExpression (正規 表現 ) に つい て W 


JavaScript1.2 か ら 、 一 定 パ ター ン の 文字 ・ キ ャ ラク ター を 設定 し 、 そ れ を 使っ て 検 
索 や 置き 換え が で きる よう に な り ま し た 。 

パタ ー ン の 設定 は 、 設定 する 文字 や キャ ラク ター を 「[/ で 括る こと に よっ て 行い ます 。 
パタ ー ン の 認識 方 法 は 、 た と えば 「/abc/| と 設定 し た 場合 は 、 完 全 に 同じ 「abc」 と いう 文 
字 列 で な けれ ば パタ ー ン が 合っ て いる と 認識 され ませ ん 。 ま た 「/ab*c/」 と 設定 し た 場合 
で は 、「abc」 だ け で な く "b" の 後に 複数 の "b" が ある "abbbc" の よう な 時 も パタ ー ン が 合っ 
て いる と 認識 され ます 。 

パタ ー ン の 設定 方 法 は 、 こ の 他 に も た くさ ん あり ます 。 


RegularExpression (正規 表現 ) 関連 で は 、strinsg オプ ジェ クト に メソ ッ ド が 追加 され る 
と と も に 、 パ ター ン の 設定 を 取り 扱う RegularExpression オプ ジェ クト が 追加 され て い 
ます 。 


基本 的 な RegularExpression の 用 法 は 、 以 下 の 通り で す 。 
また 、 正 規 表現 自体 の 用 法 に 関し て は 、 多 く の 有 用 な 書籍 が 刊行 きれ て いま す の で 、 
参考 に する と いい で し ょ う 。 


この サン プル で は 、 sring オプ ジェ クト の 「match( パ ター ン の 設定 )」 メ ソ ッ ド を 使っ 
て 、 一 定 の パタ ー ン の 文字 と 合っ た 文字 を 検索 し て いま す 。 


<script 1anguage="JavaScript1 .2"> 
Ss1 = "NetscapeNavgator4.0": 

Foun = s1.match ( /NaY/ ) : 

document .write( Foun) : 


</ SCr1pt> 


次 の サン プル で は 、 sring オプ ジェ クト の 「replace( パ ター ン の 設定 "入れ 林 え る 文字 
烈 り ] メ ソ ッ ド を 使っ て 、 指 定 し た 文字 列 を 別 の 文字 列 に 入れ 替え て いま す 。 


<Script 1anguage="JavaScript1 .2"> 

82 = "NetscapeNavgator4.0": 

rep] = Ss2.replace( /Navgator/ , "Communicat" ) 
document . write (rep1 ) : 


</ SCr1pt> 


次 の サン プル で は 、string オプ ジェ クト の [split( パ ター ン の 室 )] を 使っ て 、 パ ター 
ン が 合っ た 部 分 で 文字 列 を 分 割 し て いま す 。 








<SCript 1]anguage="JavaSoript1 .2"> 
S3 = "NetscapeNavgator4.0": 

Sp11 = gs3.sp1it(/a/ ) : 
document . write (sp11 ) : 


< く / SCr1Dt> 


次 の サン プル で は 、「new RegExp(" パ ター ン の 設定 ")] メ ソ ッ ド を 使っ て Regular 
Expression オブ ジェ クト を 作成 し 、「exec( 検 索 す る 文字 列 )」 メ ソ ッ ド を 使っ て 一 定 の パ 
ター ン の 文字 と 合っ た 文字 を 検索 し て いま す 。 

string オ ブ ジ ェクト の 「matchO)」 メ ソ ッ ド と 似 て いま す が 、 こ の 場合 は ドキ ュ メ ント 
が アッ プア デー ト さ れ ま す 。 


<8Cript 1anguage= "JavaScript1 .2"> 
re = new RegExp ( "NaV" ) 

sg4 = "NetscapeNavgator4.0": 

exe = re.exec (84) : 


document .write (exe) : 


</ Script> 








上 Signed Script ( 箸 名 付き スク リプ ト ) の 使い 方 目 


Netscape Navigator 4.0 で 採用 され て いる JavaScript1.2 で は 、 セ キュ リティ な どの 関 
係 で 、 デ ィ ス プレ イ の 表示 領域 外 に 新しい ウィ ンド ウ を 開く こと が で き な い 、100 ※ 
100 ピク セル 以下 の サイ ズ の ウィ ンド ウ を 新しく 開く こと が で き な い な ど 、 ス クリ プ 
ト の 一 部 に 制約 を か け て いま す 。 

こう いっ た 制約 を 超え て スク リプ ト を 実行 し た い 時 や 、 ス クリ プ ト の 動作 前 に 
ザー に 認証 を し て も らい た い 時 な ど に 、Java Archive (JAR) を 利用 し て 、 ユ ー ザ ー に 
財 か リプ ト の 開発 元 な どの 情報 を 提示 し 、 ユ ー ザ ー の 承認 を 得 て か ら ス クリ プ ト 
を 実行 させ る と いう こと が で きま す 。 こ の 認証 手続 き の 用 法 を 「Signed Script] と いい 
ます 。 


Signed Script は 、 次 の 例 の よう に <scrip> 内 で 「archive」 属 性 と 「iq」 属 性 を 指定 し て 
行い 、 そ の 内 の 「archive」 は デジ タル 認証 の ソー ス で ある Java Archive(JAR) フ ァイル 
名 を 、「iq」 は Java Archive (JAR) ファ イル か ら の 署名 と 組み 合わ せ て 使う 文字 列 を 指 
定 し ます 。 


<Script archive="myArchive .]ar" 1d="1"> 
document .write ("これ は 、signed Script で す 。") : 


</ Script> 


イベ ント ハン ドラ と 組み 合わ せ て 使用 する 場合 は 、 イ ベン ト ハ ンド ラ が 含ま れる タ 

グ 内 に は 「archive」 を 指定 する 必要 は あり ませ ん が 、 次 の 例 の よう に イベ ント ハン ドラ 
より 前 に 「Signed Scrip] の 指定 を 行っ て お く 必 要 が あり ます 。 

また 、「Signed Scrip」 で は 、「<a hre="javascript…] は 使え ませ ん 。 


<8SCript arochive="myArchive . ar" 1d="1"> 
) 

</ Script> 

< く fForm> 


<input ype="button" value=" ク リッ ク し て !!" onC1ick="a1ert ( ' こ れ は ie 


GESDE'G9.1UO) 313 三 N2 ツ テ 

</ Eorm> 
帳 
ング 
ム 





[archive 属性 で 指定 する JavaArchive (JAR) ファ イル は 、1 種類 し か 使用 で きま せん 。 始め 
の HTML ファ イル 中 に Java Archive(JAR) フ ァイル が あっ た 場合 、 そ れ 以 降 の |SignedScript」 
で 指定 きれ た スク リプ ト は 、 次 の 例 の よう に [id] を 指定 する こと に より 、 同 じ JavaArchive 
(JAR) フ ァイル を 使用 する よう に し ます 。 

この 時 、HTML ファ イル が 異な っ た プラ ッ ト フ ォ ー ム の サー バー 上 に また が っ て 置か れ 
て いる よう な 場合 (た と えば Windows と UNIX 間 ) 、 問 題 が 発生 する 可能 性 が あり ます 。 
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「Signed Script| を 含め た Netscape Navigator 4.0 の セキ ュ リ ティ に 関し て は 、 


「Client-Side JavaScript Guide」 
(http: //tecfa .unige .ch/guides/]s/]sguide13 /index . htm] ) 


の 「Chapter 14 JavaScript Securiy」 な ど を 参考 に し て くだ さい (英文 )。 








| 略 上 


Netscape Navigator 3.0 か ら は 、JavaScript を 使っ て プラ ウザ 上 の JAVA アプ レッ ト や 
プラ グイ ン を 制御 する た め の 仕掛 けが 用 意 さ れ ま し た 。 こ の 仕掛 け を 「Live Conneci| と 
言い ます 。 

Live Connect を 使用 する た め に は 、 JAVA ア プレ ッ ト も プラ グイ ン も Live Connect に 
対応 し て いる 必要 が あり ます 。 

Netscape 社 で は 、 プ ラウ ザ 上 か ら Web サー バー の 設定 を 可能 に する た め に この Live 
Connect の 技術 を 使う な ど 、 プ ラウ ザ を 他 の 機能 と 結び 付け る た め の 接着 剤 の 役割 と し 
て 使っ て お り 、 今 後 ます ます 利用 範囲 が 広がっ て 行く と 思わ れ ま す 。 


Live Connect に 関し た JavaScript 側 で 用 意 き れ て いる オプ ジェ クト に は 、Applet オブ 
ジェ クト と embeds 配 列 が あり ます 。 


Applet オ ブ ジ ェクト (配列 ) 
【 用 法 】 


【 プ ロ パ ティ 】 


本 アプ レッ ト の 数 (配列 数 ) 


【 メ ソ ッ ド 】 

JAVA ア プレ ッ ト の すべ て の "public method" 
文字 列 を 数 値 に 変え る 
オブ ジェ クト な 文字 列 に 変え る 










オブ ジェ クト の 値 を 返す 
embeds 配列 
[用法 】 
【 プ ロ パ ティ 】 
0 了 お 84 ミ プラ グイ ン の 数 (配列 数 ) 
【 メ ソ ッ ド 】 


各 プ ラグ イン 独自 の メソ ッ ド 












この 頃 で は 、Web ペー ジ 作 成 用 の ツー ル に 、JavaScript を 使っ た ペー ジ を 手軽 に 作成 
で きる 機能 を 搭載 し た 製品 が 数 多く 発表 され て いま す 。 こ れ ら の ほとん ど が 、 設 定 画 
面 か ら 項 目 を 選択 し た り 必要 な 値 を 入れ る だ け で 、Imternet Explorer と Netscape の ど ち 
ら で も 実行 で きる JavaScript の コー ド を 自動 的 に 生成 する こと が で きま す 。 

これ ら の ツー ル は 、 自 分 で スク リプ ト を 書く の と 違い 、 で きる 範囲 が その ツー ル の 
機能 内 に 決ま っ て し まい ます が 、 手軽 に JavaScript を 使っ た ペー ジ を 作り た いよ うな 
ユー ザー に は 有効 で し ょ う 。 ま た 、 こ れ ら の ツー ル が 生成 する JavaScript の コー ド を 上 
め る の も 、JavaScript の いい 勉強 に な り ま す 。 い くつ か 紹介 し て お きま す の で 、 参 考 に 
し て くだ さい 。 


= 奉 3 は さっ 上 ご エー か 二 ま ミ MM 本 で 


「Adobe GoLive」 

(http : / /www . adobe . co . Jp/products/go1ive/main .htm1 ) 

アド ビシ ステ ムズ 社 の サイ ト 管 理 機能 も 含む 本 格 的 な Web ペー ジ 作 成 ・ 管 理 ツ ー ル 。 
JavaScript を ペー ジ 上 に 埋め 込む 機能 の 他 、Intemet Explorer ・ Netscape 両 プ ラウ ザ に 
対応 し た DynamicHTML を 使っ た ペー ジ を 作成 する こと が 可能 で す 。 





「Adobe Photoshop] 

(http : / /www . adobe . co . Jp/products/photoshop/main . htm] ) 

アド ビシ ステ ムズ 社 の 画像 編集 ツー ル 。Photoshop5.5 か ら 、Web ペー ジ 用 の 画像 編集 
ツー ル で ある ImageReady が 統合 され て お り 、 両 ソフ ト を 切り 奉 え て 使用 で きる よう に 
な り ま し た 。 ImageReady で は 、 マ ウス カー ソル が 画像 の 上 に 乗っ た 時 に 画像 を 変更 す 
る な どの JavaScript を 使っ た 効果 が 用 意 き され て いま す 。 


「Macromedia Dreamweaver」 

(htp : / /www .macromedia . Com/ Jp/soEtware/dreamweaver / ) 

マク ロメ ディ ア 社 の サイ ト 管 理 機能 も 含む 本 格 的 な Web ページ 作成 ・ 管 理 ツー ル 。 
JavaScript を ペー ジ 上 に 埋め 込む 機能 の 他 、Internet Explorer ・ Netscape 両 プ ラウ ザ に 
対応 し た DynamicHTML を 使っ た ペー ジ を 作成 する こと が 可能 で す 。 


「Macromedia Fireworks」 

(http : / /www .macromedia . com/ Jp/ soFtware/Fireworiks / ) 

マク ロメ ディ ア 社 の Web ペー ジ 用 の 画像 編集 ツー ル 。 マ ウス カー ソル が 画像 の 上 に 
乗っ た 時 に 画像 を 変更 する な どの JavaScript を 使っ た 効果 が 用 意 さ れ て いま す 。 


「IBM ホー ムペ ー ジ ・ ビ ル ダ ー」 

(http: / /www-6 .1bm .com/]p/soFtware/1inEterne て /hpb/ index . htm1 ) 

IBM 社 の サイ ト 管 理 機能 や 画像 ・ 映 像 編集 ツー ル も 含む 本 格 的 な Web ペー ジ 作 成 ・ 管 
理 ツ ー ル 。 JavaScript を ペー ジ 上 に 埋め 込む 機能 の 他 、DynamicHTML を 使っ た ペー ジ 
の 作成 を し た り 、 画 像 作成 時 に マウ スカ ー ソ ル が 画像 の 上 に 乗っ た 時 に 画像 を 変更 す 
る な どの JavaScript を 使っ た 効果 を 使う こと が 可能 で す 。 
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』 ホー ムペ ー ジ 作成 関連 リン ク | 


HTML 関連 リン ク 


「W3C - The World Wide Web Consortium」 


http : / /www . w3 . org/ 
World Wide Web の 標準 化 作業 を 行っ て いる 非 営利 団体 W3C の サイ ト (英語 ) 


「W3C の 仕様 書 等 の 文書 の 日 本 語 訳 集 」 
ht て D : / /www . W3 . org/Consortium/Trans1ation/JapaneSse 
W3C 仕 様 書 の 日 本 語 訳 の 一 覧 


「W3C HTML Validation Service」 
hp : / /va1 1dator .W3 . org/ 
W3C に よる HTML の 検証 サー ビス (英語 ) 


「HTML 4.01 Specification」 
http : / /www .w3 . org/TR/htm14/ 
HTML4.01 の 仕様 書 の 原文 (英語 


「XHTML 1.0: The Extensible HyperText Markup Language」 
hEtp : / /www .w3 . org/TR/xhtm11/ 
XHTML1.0 の 仕様 書 の 原文 (英語 ) 


「Modularization of XHTML」 
同 則 http://www.w3 .org/TR/xhtm1-modu1arization/ 
XHTML の モジ ュー ル 化 の 仕様 書 の 原文 (英語 ) 


「XHTML Basic」 
http: / /www .w3 .org/TR/xhtm1 -basic/ 
XHTML Basic の 仕様 書 の 原文 (英語 ) 


「XHTML 1.1 - Module-based XHTML」 
大仙 示 http://www .w3 .org/TR/xhtm111/ 
XHTML1.1 の 仕様 書 の 原文 (英語 ) 


「Ruby Annotation]」 


http : / /www .w3 .org/TR/ruby/ 
ルビ (モジ ュー ル ) の 仕様 書 の 原文 (英語 ) 


00 ホー ムペ ー ジ 人 リン ク 





「The Web KANZAKI」 
http : / /kanzaki .Com/ 
HTML を 正しく 理解 する た め の わ か りや すい 解説 が ある 


【 ア クセ シビ リティ 】 
「Web Content Accessibility Guidelines 1.0] 
htEp : / /Www . w3 . org/TR /WAT-WEBCONTENT/ 
W3C の 勧告 で ある アク セ シ ビ リティ ・ ガ イド ライ ン 1.0 の 原文 


「Techniques for Web Content Accessibility Guidelines 1.0」 
感 3 則 了 http://www.w3 .org/TR/WCAG10-TECHS/ 
上 記 ガ イド ライ ン に つい て の 、 よ り 具 体 的 な 解説 と サン プル な ど 


「ZSPC] 


IDRI hp : / /Www . ZSDC . Com/ 
アク セ シ プ ブル な ウェ ブ デ ザイ ン に 関す る 情報 サイ ト 


「A.A.0. - Web ア クセ シビ リティ 実用 サイ ト ]」 
http : / /www . aao . ne . Jp/ 
アク セ シ ブ ル な ウェ ブ を めざす 提供 者 と 利用 者 の た め の 実 用 サイ ト 


「Web アク セ シ ビ リティ の ポー タル サイ ト 「Infoaxia (イン フォ アク シア )]」 
http: //www.infoaxia.cCom/ 
Web ア クセ シビ リティ を 理解 し 実践 する た め の ポ ー タ ル サ イ ト 


CSS 関連 リン ク 


[Cascading Style Sheets, level 1 
http: / /www .w3 . org/TR/REC-CSS1 
CSS1 の 仕様 書 の 原文 (英語 ) 


[Cascading Style Sheets, level 2」 
[ 因 得 http://www.w3 .org/TR/REC-CS8S2/ 
CSS2 の 仕様 書 の 原文 (英語 


「W3C CSS 検証 サー ビス 」 
IDRI http : / /]1gsaw .w3 . Org/CSS-va11daor/ 
W3C に よる CSS の 検証 サー ビス 


「CS82 対応 状況 ガイ ド ]」 
國 旭 ゆ http://www.zspc.com/documents/oss2/ 
各種 プ テ ウ ザ の CSS2 の 対応 状況 の 一 覧 








JavaScript 関 連 リ ンク 

Netscape 社 の リフ ァ レ ンス 

「JavaScript Guide」 

htp : / /wp . netscape . com/ eng/moz111a/3 . 0/hanqdbook/ 
javascript/index .htm1 
JavaScript 1.1 の ガイ ド ( 英 語 ) 


Microsoft 社 の リフ ァ レ ンス 

「JScript」 

http: / /msdn .microsoFt . com/scripting/]script/deFau1t .htm 
Microsoft 社 の JavaScript 互換 の スク リプ ト JScript の 解説 (英語 


「JScript」 

htEp: / /www.microsoft . com/Japan/Deve1oper/Soripting/JScript/ 
defau1t .htm 
JScript の 日 本 語 解説 ペー ジ 


「HTML and Dynamic HTML」 

hp : / /msdn .microsoFfFt . Com/11brary/defau1t .asp?ur1=/ 
workshop/auEthor/qhtm1 /dhtm1_node_entry . asp 
Internet Explorer に お ける DynamicHTML の 解説 (英語 ) 


mozilla.org の 関連 資料 
「JavaScript」 | 
http : / /www .moz111a.org/]s/ 

mozilla.org の JavaScript1.3 関連 情報 の ペー ジ ( 英 語 ) 


「Gecko DOM reference」 
http : / /www .moz111a.org/docs/dom/domref/ 
Netscape や Mozilla で 実装 され て いる レン ダリ ング エン ジン 、GQecko の DOM 
リフ ァ レ ンス (英語 ) | 


その 他 の JavaScript 関連 の 仕様 

「The World Wide Web Consortium] 

http : / /www .w3 . org/ 
Web の 仕様 の 標準 化 を 行っ て いる W3C の サイ ト 。HTML、CSS、DOM な ど 
の 仕様 を 公開 (英語 ) 


「ECMA-262」 


語 議 ) http://www.ecma .ch/ecma1 / STAND/ECMA-262 .HTM 
ECMAScript(ECMA-262) の 仕様 (英語 


06 ホー ムページ リンク 


「Core JavaScript Guide」 
http: / / synchro . net/docs/]s/guide/index .htm1 
以前 は Netscape 社 に あっ た JavaScript1.5 の ガイ ド ( 英 語 ) 


「Core JavaScript Heference 」 
http : / / synchro . ne 上 /docs/]s/ref/1ndex .htm1 
以前 は Netscape 社 に あっ た JavaScript1.3 の リフ ァ レ ンス (英語 ) 


メー リン グリ スト 

[js-ML」 

男 % 則 http://www.Eureai .or.Jp/~Eato/]s-m1/]sm1 .htm 
DynamicHTML お よび DHTMLcross-browser、JavaScript 関連 の メー リン グリ 
スト 


ネッ トニ ュー ス 
comp.lang.javaScript 

英語 の JavaScript の 話題 を 取り 扱っ た ニュ ー ス グル ー プ (英語 ) 
fj.lang.javascript 

日 本 語 の JavaScript の 話題 を 取り 扱っ た ニュ ー ス グル ー プ 


その 他 の Web ページ 

「OpenSpace」 

http : / /www. Shto]iri .ne . Jp/~openspc/ 
情報 量 は 随 一 


「 と ほほ の WWW 入門 ] 
http : / / tohoho . wakuse1 .ne . Jp/ 
HTML や JavaScript を は じ め と し た 、 総 合 Web ペー ジ 作 成 関連 情報 


「 独 学 JavaScript」 
http : / /www .ueda . info .waseda . ac .Jp/~gaku/]s/1ndex .htm1 
JavaScript 関連 ペー ジ の 老舗 


「JavaScript Tips 集 」 
http: / /www .din . or. jp/~hagi3 /JavaScript/JSTips/Defau1t .htm 
JavaScript、DHTML 関連 、cross-browserDHTML 情報 が 多数 あり 


「WebPage で 使え る JavaScript]」 


http : / /www . bekkoame .ne . Jp/~hambpa/webimage/]ava/]ava . htm1 
JavaScript 関連 リン ク が 充実 し て いる 
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「All About Japan [JavaScript]」 
htp : / /a11about . Co . Jp/ computer/ avascrip/ 
JavaScript 関連 リン ク を は じ め 、 多 く の 関 連 情 報 が ある 


「Mozilla's DOM Sample Project」 
IURI 2 hEEp: //cgi .dim .or. Jp/~hagi3/JavaScript/JSTips/Moz111a/mds . Cg1 
Mozilla で 使用 で きる DOM の サン プル を 集め た サイ ト (英語) 


「JavaScript Developer Centrall は どこ へ ? 

Netscape 社 の サイ ト に は 、 開 発 者 向け の ペー ジ と し て 、「DevEdge Online」 
(http://developer.netscape.Com/) と いう ペー ジ が 用 意 さ れ て 、 一 般 に 公開 され 
て いま し た 。 そ こ に は 、JavaScript に 関す る 各種 仕様 書 や サン プル 、 ガ イド を 収 
め た 「JavaScript Developer Centrall(http://developer.netscape.com/ 
tech/javascript/index.html) の ペー ジ も 含ま れ て いま し た 。 

し か し 、 ら 004 年 1 ら 月 初旬 か ら 、 こ の 開発 者 向け の ペー ジ に アク セス で き な く 
な っ て し まい まし た 。 そ し て ら 2005 年 月 初旬 現在 で も や 、 ア クセ ス で き な い 状態 が 
続い て いま す 。 


確か に 、Netscape Navigator は 、Netscape 8 の 開発 者 向け リリ ー ス が 行わ れ 
た こと も あり 、 開 発 と し て は 区 切り が 来 て いた と 言え ます 。 ま た 、 一 般 に 公開 され 
た 形 の 開発 者 向け の ペー ジ が 、 こ の まま な く な っ て し まう と は 思え ませ ん 。 

し か し 、「JavaScript Developer Centrall は 、JavaScript が 、 バ ー ジ ョ ン ご 
と に どの よう に 変化 発展 し て きた か を 知る こと が で き 、JavaScript の 歴史 が すべ 
て 残さ れ て いる と 言っ て も よい 貴重 な ペー ジ で し た 。 こ の ペー ジ が 、 こ の まま な く 
な っ て し まう と し た ら 、 残 念 な こと で す 。 





『 参考 | 


JavaScript や DynamicHTML を 知る た め に 役立ち そう な 書籍 や 、 著 者 が 普段 か ら 参考 
に し て いる 書籍 を 紹介 し ます 。 


HTML&CSS 関連 書籍 


[XHTML+CSS で 書く ホー ムペ ー ジ 構造 デザ イン ガイ ド 」 
(大 藤 幹 : 基 秀和 シス テム 刊 ) 


「 ス タイ ル シ ー ト サン プル ブッ ク 」 (大 藤 幹 : 着 ソシム 刊 ) 
「 詳 魚 HTML&XHTMLSCSS 辞典 改訂 版 ] (大 藤 幹 : 著 秀和 シス テム 刊 ) 


JavaScript 関 連 書籍 
[フル カラ ー 版 だ れ で も カン タン JavaScript サ ンプ ル 集 」 
(高橋 登 史朗 : 着 秀和 シス テム 刊 ) 


「 ち ょ ー 初 心 者 の た め の JavaScript 入 門 」 ( 半 場 方 人 : 著 秀和 シス テム 刊 ) 
「JavaScript 入 門 」 ( 半 場 方 人 : 著 技術 評論 社 刊 ) 

「 改 定 第 8 版 JavaScript ポ ケッ トリ ファ レン ス 」 ( 語 矢 一 和浩: 著 技術 評論 社 刊 ) 
「OFFICIAL Netscape JavaScript」 (Peter Ken.John Kent: 著 BNN 購 ) 


DynamicHTML 関連 書籍 
[詳解 JavaScript&DynamicHTML 辞典 ] ( 半 場 方 人 : 著 秀和 シス テム 刊 ) 


「 ダ イナ ミッ ク HTML ファ ー ス トス テッ プ ] (松尾 忠則 : 著 秀和 シス テム 刊 ) 
「 だ れ で も カン タン DynamicHTML サン ブル 集 」 (高橋 登 史朗 : 著 秀和 シス テム 刊 ) 


[DynamicHTML で つく る ホー ムペ ー ジ 」 
(松尾 忠則 ・ 半 場 方 人 ・ す ぎ う らし ろう : 著 古 療 一 浩 : 監 修 技術 評論 社 刊 ) 


[使え る JavaScript&DynamicHTML サン プル 大 全 」 ( 攻 原 真一 : 著 秀和 シス テム 刊 ) 


「 こ こま で で きる !JavaScript らく らく 活用 サン プル 集 」 (高橋 登 史 朗 : 著 秀和 シス テム 刊 ) 
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定価 は カバ パー に 表示 し て あり ます 。 
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有 | カラ ー チ ャ ー ト 1 : HTML4.01 で 名 前 が 定義 され て いる 色 上 


HTML4.01 で color 属性 の 値 と し て 定義 され て いる 色 名 は 、 以 下 の 通り で す ( 色 の 名 
前 に は 大 文字 と 小文字 の 区 別 は あり ませ ん ) 。 

これ ら は 、CSS2 で も 同様 に プロ パテ ィ の 値 と し て 利用 で きま す 。 現在 で は 、HTML 
の 属性 で 色 を 指定 する こと は 非 推奨 と され て いま す の で 、 で きる だ け ス タイ ル シ ー ト 
を 使用 する よう に し て くだ さい 。 

具体 的 な 色 の 指定 の 方 法 は 、HTML の 場合 は 「 け HTML に つい て 」 の |「 色 の 指定 方 法 」 
(P.6) 、CSS の 場合 は 「 け スタ イル シー ト に つい て 」 の 「 色 の 指定 方 法 ](P.180) を 参照 し て 
くだ さい 。 











00000 black は UU は りり りり green 
5 ょ 昌 

silver 。 WOOEEOO ln 
#808080 gTaY せ olive 
は ささ ゴゴ ゴ white 四国 BEEOG 証 yelow 
3 りり りり リ maroon #000080 maVy 
は よう りり りり red は リリ リリ オ : blue 
#800080 Durple 1 は 1 り teal 





fachsia adua 


Web Safe カラ ー に つい て WM 


パソ コン の 画面 上 の 色 は 、RGB (Red、Green、Blue) の 色 を それ ぞ れ 0 ~ 25$ まで の 
256 段階 に 調節 し て 色 を 表現 し て いま す 。 し た が っ て 、 フ ルカ ラー で は 236 X 256 X 
256(R XGXB) の 16.777.216 色 が 表現 され ます 。 

「Web Safe カラ ー」 と は 、 こ の 各 236 段階 ある RGB 値 を 6 段階 に し た も の で す 。 そ し 
て 、 そ の 6 段階 の 値 と は 、0 ・$1 ・ 102 ・153 ・204 ・255 と 、0 か ら 51 ず つ 増 や し て 
いっ た 数 に な っ て いま す 。31 は 16 進数 で いう と 「33」、 割 全 で いう と 「20 %」 に あたる 
数 で す 。 つ まり 、[Web Safe カラ ー」 は 、RGB の 各 値 (画面 上 で は 光 の 強 さ ) を 0% か ら 
20% ず つ 上 げ て いっ た 値 の 組み 合せ で 作ら れ て いる と いう こと に な り ま す 。 







10 進 数 
16 進 数 
% 








これ ら を 組み 合わ せる と 、RGB の 3 色 が それ ぞ れ 6 段階 ある の で 、6X6X6 の 216 


色 が Web Safe カテ ー と いう こと に な り ま す 。 
具体 的 な 色 に つい て は 、 次 ペー ジ を 参照 し て くだ さい 。 
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有 | 。 カラ ー チ ャ ー ト 2: Web Safe カラ ー 


Windows や Macintosh な どの プラ ッ ト フ ォ ー ム で それ ぞ れ 設定 され て いる 、236 色 の 
シス テム カラ ー パ レッ ト の うち 、 共 通し て いる 216 色 の カラ ー チ ャ ー ト で す 。 

これ ら の 色 を 使う こ 異な る OS 環境 で も 色 化 け な ど を 生じ させ る こと な く 表 示 
する こと が で きま す 

印刷 きれ た 色 は 、 実 際 に 画面 に 表示 され て いる 色 と は 多少 異な り ま す 。 大 体 の 色 の 
じ を 掴む た め に ご 利用 く い 


は リリ リリ リリ ルト た 】 り リリ コリ リコ コリ リ 
60 り いり 朋 りり いり 朋 りり (0 りり 月 に ち 移 りり 50 りり りほ ! レ り りり | 
共 000033 ユリ リト た た を 】 は リリ ネト 】 
りり 月 りり 月 上 】 りり と は の に 2950 りり リリ た いと 上 19) 




















は リリ ココ 1-) 
0 り リリ UI ルレ な いじ 】) 








りり UI に た た 1 に 医 0099co | #00cccc 。 #00EFcc 
(000,000,204) 目 (000,051,20 (000153j20@) (oo0,204,204) (000,255,204) 


た た た を 1 り リリ : た た 】 さ りり 
0 は に はり りり 】 5 は すま いと お りり リリ ) 


: た た 1-】- た た 1 
(051,102,051 


昔 0099EE 草 00CoCF 下 昔 00EEEE 
(000,153,255) (000,204,255) (000,255,255) 


た た 】 コ ココ 
(DE【 レ いり) 





井 3399co #33cCooc 井 33E 下 oo 
(051,153,204) (051,204,204) (051,255,204) 








暮 3399E 下 井 33 で CE 井 33EE 下 下 
(051,153,255) (051,204,255) (051,255, 255) 


は ココ リリ リリ 暮 6633 #666600 
(102,000,000) 目 (102,051,000) 目 (102,102,000) 
は 11 り に た 】 1- た キキ た 1 666633 
(102,000。051) 目 (102051,051) 四 (102,102,051) 
メス コリ リコ -) ##663366 コス ココ ココ コ 
(102,000,102) 目 (102,051,102) 四 (102,102。,102) 
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井 6699cCc 井 66 ご Cc 井 66EEcG 
(102,153,204) (102,204,204) (102,255,204) 








井 6699E 王 井 66CoF モ E 井 66EEE 下 
り (102,153』255) (102,204,255) (102,255,255) 


: ナ トル ココ リリ 
を に た 下 【 と 朋 り りり ) 


: た た た た を た 1 
(153,051,051 
















た た た た 1-】-】 
(153,051,102) 


た た よ コ コー 
(153,102,102) 


井 9999cc 井 99 で oo 井 99 下 ECo 
(153,153,204) (153,204,204) (153,255,204) 


E よ 』 い い 9933 草 9999E 下 菩 99CcfF 下 井 99EEEE 
2 (153,153』255) (153,204,255) (153,255,255) 


スコ リリ リリ に た た 】 り りり ココ り り 
(204,000,000) 上 (204,051,000) 目 (204,102,000) 
韻 cc0033 に た た た を 】 井 Cc6633 
(204,000,051) 目 (204,051,051) 目 (204,102,051) 
に に k た 1-1.】 #oo6666 
(204,051,102) 目 (204,102,102)| 
#cc9999 


(204,153,153) (20 






#CC99 ご Co 井 CCCCoG 韻 C ご EE 
(204,153,204) (204,204,204) (204,255,204) 


井 CC99E 韻 で CCCFE 井 ご CE 
(204,153,255) (204,204,255) (204,255,255) 


まそ さ 1 リリ 


: メ キュ リリ リリ トメ エキ 1 りり 

(255,000,000) 目 (255,051,000) 目 (255,102,000 
メオ コリ リト よ ] トメ エト トモ) #EE6633 
(255,000,051) 目 (255,051,051) 上 (255,102,051 
ぶよ コリ リコ ゴ も メ よ た 】1 コ 韻 EE6666 
(255,000,102) 目 (255,051,102)(255,102,102) 














#EE9999 #FFoo99 
(255,153,153) (255,204,153) 


韻 EE99CG 井 下 FCCCo 井 下 EC 
(255,153,204) (255,204,204) (255,255,204) 


電 EE99 下 王 井 下 CCEE 井 下 王 王 下 正 
(255,153,255) (255,204,255) (255,255,255) 
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カラ ー チ ャ ー ト 3 : Color Name 


HTML4.01 ・CSS2 で 正式 に 設定 され て いる 色 、 プ ラッ ト フ ォ ー ム 間 で 共通 な 色 、 と 
いう よう に 紹介 し て きま し た が 、 最 後 は プラ ウザ で 設定 され て いる 色 で す 。 

以下 の チャ ー ト は 、Internet Explorer と Netscape Navigator で 名 前 が 定義 きれ て いる 
140 色 で す (HTML4.01 で 定義 され て いる 16 色 も 含ま れ て いま す ) 。 色 を 名 前 で 設定 す 
る 時 に 利用 する こと が で きま す が 、 あ くま で も プラ ウザ が 対応 し て いる も の で ある の 
で 、 不 安定 な 部 分 が ある こと に 注意 し て くだ さい 。 

印刷 され た 色 は 、 実際 に 画面 に 表示 され て いる 色 と は 多少 異な り ま す 。 大体 の 色 の 
感じ を 掴む わた め に ご 利用 くだ さい 。 

















は オオ キオ ゴゴ White #c0c0c0 Silver 
#EEFafFa Snow #d3d3qd3 LightGrey 
#E8E8FE GhostWhite #dcdcdc Gainsboro 
#E5E55 WhiteSmoke LightSlateGray 
EEaE0 FloralWhite SlateGray 
##EaE0e6 Linen - #b0c4de | LightSteelBlue 
#Eaebd7 AntiqueWhite SteelBlue 
#EEeFQd5 PapayaWhip RoyalBlue 
#EEebod BlanchedAlmond MidnightBlue 
#EFe4o4 。 。 Bisque Navy 
。 Moccasin Darkblue 
NavajoWhite MediumBlue 
1 だ 衣 PeachPuff Blue 
#EEe4e1 MistyRose DodgerBlue 
#EEE0F5 LavenderBlush CornflowerBlue 
#EEF5ee Seashell 四国 05 DeepsiyBlue 
#EqF5e6 OldLace  #87eefa LightskyBlue 
ゴイ ゴゴ コリ Tvory 生生 876eeb  。 skyBlne 
#EOEFEO Honeydew #add8e6 LightBlue 
提 E5E モ Fa MintCream #b0e0e6 PowderBlue 
ユリ オオ ゴゴ Azure #afeeee PaleTurquoise 
#E0E8EE AliceBlue #e0EFF LightCyan 
#e6e6fFa Lavender 、  #00EEEE Cyan 
ET) Black 00EEEE 間 Aqua 
DarkSlateGray -  #40e080 Turquoise 
DimGray 、  #48d1cc MedinumTurquoise 
Gray 、  #00ced1 DarkTnurquoise 
、 Wa9a9a9 Darkgray 2052aa LightSeaGreen 
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井 008b8b 
#008080 
と 人)・ に Y4 
: た た 】 う ・ ア f』 
は リリ イコ リリ 
りり U は りり リ 


#6b8e23 
た 1 は リリ リ 


』 





#EEF8do 
#F5F5do 
#EEFfe0 
#Eafad2 
#EEFacd 

EE 





CadetBlue 
Darkcyan 

Teal 

SeaGreen 
DarkOliveGreen 
DarkGreen 
Green 
ForestGreen 
MediumSeaGreen 
DarkSeaGreen 
MediumAquamarine 
Aquamarine 
PaleGreen 
LightGreen 
SpringGreen 
MediumSpringGreen 
LawnGreen 
Chartreuse 
GreenYellow 
Lime 

LimeGreen 
YellowGreen 
OliveDrab 

Olive 
DarkKhaki 
PaleGoldenrod 
Cornsilk 

Beige 
LightYellow 
Lightgoldenrodyellow 
LemonChiffon 
Wheat 
Burlywood 

Tan 

Khaki 

Yellow 

Gold 

Orange 
SandyBrown 
DarkOrange 
Goldenrod 


Peru 


の: た 11 り っ 
レキ ト ドコ 
た いた に ア ヤバ ・! 
#8b4513 
1 りり りり リ 
まり) リリ リリ 
: た に アモ ヤ ト 1 
:・ ア シヤ ヤヤ]1 
#cd5c5c 


メキ ユエ 9/ 
は よる よ ) り リリ 
みよ うり りり リリ 
#dc143c 
#c71585 


#EfEc0cb 
#EEb6c1 
#d8bEd8 


井 9932cc 
#9400d3 
まお) りり リリ: 
1 りり 1 
9 リリ リル 1 
#483qd8 ゎ 
ヒヤ < と 1 
た た が 4 に! っ) 
#6a5acd 
#7b68ee 





DarkGoldenrod 
Chocolate 
Sienna 
SaddleBrown 
Maroon 
DarkRed 
Brown 
Firebrick 
IndianRed 
RosyBrown 
DarkSalmon 
LightCoral 
Salmon 
LightSalmon 
Coral 

Tomato 
OrangeRed 
Red 

Crimson 
MediumVioletRed 
DeepPink 
HotPink 
PaleVioletRed 
Pink 
LightPink 
Thistle 
Magenta 
Fuchsia 

Violet 

Plum 

Orchid 
MediumOrchid 
DarkOrchid 
DarkViolet 
DarkMagenta 
Purple 

Indigo 
DarkSlateBlue 
BlueViolet 
MediumPnrple 
SlateBlue 
MediumSlateBlue 
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フォ ント 表示 見 本 


Windows 


MS ゴシック 


日 本 語 字 見 本 
あい うえ お アイ ウエ オ 
0123456799 1 "7#$%&/* ネ ー+ 


MS 明 朝 


日 本 語 漂 字 見 本 
あい うえ お アイ ウエ オ 
0123456799 1! "#$%&/* ネ ー キ 


Arial 


ABCDEFGHIJKLMNOPQRSTUVWXYZ 
abcdefghilKmnopqrstuywwZ< 
01234567891"#$9% &/-+ 


Comic Sans MS 
ABCDbEF6HTJKLANOPGRSTUVWXYZ 
abcdefghijklImnopqrstuvwxyz 
01234567891" 中 % あ / テ ー キ 


Courier 


ABCDEFGHIJKLMNOPQRSTUVwXYZ 
abcdefghi]k1mmnopqrStuVwxyz 


0123456789 | リ # 人 5 を & プ ォ キー オ 
Impact 
AEFGHIUKINNOPORSTIWWIV7 

ahe 


eghijhlmnopirsluVWW 
0123455789!1"#5%&7"ー+ 


News Gothic 


ABCDEFGHIJKLMNOPQRSTUVWXYZ 
abcdefghijklrmnopdrstuvWXyz 
0123456789!"#$% 反 /- 二 


Times New Homan 


ABCDEFGHTIKLMNOPQRSTUVWXYZ 
abcdefghtiklmnopqrstuvwwxyz 
0123456789 1"#$% 7 ま - 二 
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MS P ゴ シッ ク 

日 本 語 漂 字 見 本 

あい うえ お アイ ウエ オ 
01234567891"#$%&/ キ ネー キ + 


MS P 明 朝 

日 本 語 漂 字 見 本 

あい うえ お アイ ウエ オ 
0123456789!"#$%/ ネ ー キ 


Century Gothic 


ABCDEFGHIJKLMNOPQRSTUVWXYZ 
Q ロ DcdefghiikInnnopqrsTuvwxyz 
01234567891"#$% 8 /*-+ 


Copperplate 


ABCDEFGHIJKLMNOPQRSTUVWXYZ 
ABCDEFGHI.JFKTMTNOPQORSTUVWXY 
O1234867891" か 中 96&/*- キ 


Courier New 


ABCDEFGHTJKLMNOPBORSTUVWXY2 
abcdeFghi ]k1mnopqrgtuvwxyz 
0123456789 ! "#5$ gg/ ネ ー キ 


Lucida 


A48CDEFCJKLMAMOPORSTUVWX グ 
gPcde 缶 包 応 の PSTMVWXVZ 
0723456Z89! "まる %@/*ー+ 


Symbol 


ABXAE の THI2KAMNOIIGPZTYcG2EYZ 
6gd7yyuKAgyorOpororoo と て 
01234567891V# ゴ 2% 7 ネー+ 


Verdana 


ABCDEFGHIJKLMNOPQORSTUVWXYZ 
abcdefghijklIrmnopqrstuvwxyz 
01234567891" きま も 96 &/*-ー キ 





Windows と Macintosh で 最初 か ら OS に イン スト ー ル され て いる フォ ント を プラ ウザ 
で 表示 させ まし た 。 フ ォ ン ト 名 を 指定 する 時 の 参考 に し て くだ さい 





Macintosh 
0saka 0saka- 等 幅 
日 本 語 河 字 見 本 日 本 語 河 宇 見 本 
あい うえ お アイ ウエ オ あい うえ お アイ ウエ オ 
01234567891" ま 見 / ネ ー キ 0123456789 ! "まま 移 & を / ネ ポー キ 
細 明 朝 体 中 ゴシック 体 
日 本 語 河 字 見 本 日 本 語 漢字 見 本 
あい うえ お アイ ウエ オ あい うえ お アイ ウエ オ 
0123456789 "951 キー 12345B7891" ま $9% は -+ 
平成 角 ゴ シッ ク 平成 明 朝 
日 本 語 漢 字 見 本 還 
あい うえ お アイ ウエ オ あ ゅ いう え お 了 ア 
01234567891" 草 表 /*ー 二 01284567891" 全 8% あ / ォ ネー 
Charcoal 


Chicago 
ABCDEFGHIJKLMNOPQRSTUVWXYZ 


HBCDEF5HIJKLMNOPQRSTUUIUHWZ 
qhcdefghijklmnopqrstuvwxyz abcdefqhijklmnopdrstuuu リ HUZ 
0123456789!" 96 衝 / キ ー キ 8123456789! "ば $ 節 三 / キ ネー キ 


Courier Geneva 
』ECDEFGHTJEKL1TNNOPORSTUVWXYg 全 BEDEFEHIJKLFHINHPURSTUVWNVZ 
abcdefdh1]K1TmnoDIT SLKy る abcdefqhijklImnonarstuvwwyz 
0123456789 |! リ "ます $ も を も アキ ネー キオ 01234567Bg1" ま も 完 本 アメ ー キ 
Helvetica Monaco 
BCDEFGHJKLMNOPGRSTUVWXYZ 上 癌 BCDEFGHTJKLKAMOPORSTUWWXYZ 
ahcdefqhijklmnopdrstuwuxWg 

01234567891"# す 9 挨 だ ー ャ 


nbrdefght ]k1mnopqrstuwww yz 
9123456789 1!"#$%&K/ ネ ー キ 
New York 


全 BCDEFGHITELMINOPORSTUVWXYZ 人 此 BCDEFGHIIKLMINOPQRSTUVWXYZ 
abcdefghijklmnopdrStUYwrxy2 abcde 后 hijklrmnmopqrstuywryyz 
01234567891" ま $ 喝 アキ ー+ 01234567891" まる 和 6 生 7 キー キ 


Palatino 


Symbol 


Times 
此 BXAEST HIOKAMINOITISPSTYcCOEYZ 


RT 
eX6ctyTmtPKALtyoTHporomoo を wC abcdefghnjklnnnp 
01234567891 マ # ゴ 完 各 / キ ドー キ 


01234567891" 02 交 /-+ 


巻末 付録 VII 


き Web サイ ズ チ ャ ー ト l 


HTML ・CSS ・JavaScript で サイ ズ を 指定 する 時 に 使う 単位 を 解説 し ます 。 た だ し 
x・% 以 外 は 、 ス タイ ル シ ー ト 内 で し か 使う こと が で きま せん 。 


相対 的 な 大 き さ の 単位 


・Px 1 ピク セル を 1 と する 単位 で す 。 主 に コン ピュ ー タ の ディ スプ レイ を 出力 対 
象 と し ます が 、 そ の 解像度 に よっ て 表示 され る 大 き さ が 異な っ て きま す の で 、 
注意 し て くだ さい 。 

・% 他 の 大 き さ に 対す る 割合 で 表す 場合 に 使用 し ます 。 対象 と する 大 き さ は 状況 
に 応じ て 、 同 じ 要 素 内 の 他 の プロ パテ ィ 、 親 要素 の プロ パテ ィ 、 そ れ を 含む 
プロ ッ ク の 幅 な ど に な り ま す 。 

・em その 範囲 で 有効 な フォ ント の 高 さ (font-size の 値 ) を 1 と する 単位 で す 。 ス タイ 
ル シ ー ト の font-size プロ パテ ィ の 値 と し て この 単位 が 使用 され た 場合 に は 、 
親 要素 で 有効 な フォ ント の 高 さ を 1 と する 値 に な り ま す 。 

・ex その 範囲 で 有効 な うみ ォ ン ト の アル ファ ベッ ト の 小文字 [x」 の 高き を 1 と する 単 
位 で す 。 フ ォ ン ト に よっ て は 、 必 ず h 
し も 「xl の 高き と 一 致す る と は 限り ま | 補 ae 
せん 。 ま た 、 こ の 単位 は 「x」 を 含ま な へ heig 【 * 
い フ ォ ン ト に も 適用 され ます 。 


絶対 的 な 大 き さ の 単位 


・in イン チ 。1 イ ンチ は 2.34cm(=25.4mm) で す 。 

*・cm セン チ メ ー ト ル 。1 セ ンチ メー トル は 10 ミ リ メ ー ト ル で す 。 

・mm ミリ メー トル 。 1 ミリメートル は 1/10 セ ンチ メー トル で す 。 

・Pt 。 ポイ ント 。1 ポ イン ト は 1772 イン チ で す 。 一般 的 に 文字 の サイ ズ を 指定 する 
時 に 使い ます 。 

・Pc パイ カ 。1 パ イカ は 12 ポイ ント で す 。 


【 メ ジャ ー】 
05 1 1.5 


由 0 2 
1U 証 間 | | | | 

0 1 2 3 4 5 6 7 8 9 10 
cm 1 1 | | | | | | 上 | | 

20 30 40 45 50 60 70 90 95 100 

mm mmmmmmmmmlmmtmmmtnmitnil 
pt Ii minnnmnmhiitinnmmlml 
間 導 IoDWeUEEU MP oi 
【 文 字 サ イズ 】 
8pt あい うえ ぇ お ぉ お ABCabc1234567890 


12pt 。 あい うえ お ABCabc1234567890 
18pn あい うえ お ABcabci234se78o0 


> っ トコ 9 
24pt あい うえ お 。gcuu2345679 
VIII 巻 未 付録 


| | 


ほお お お ピロ と 4 ピピ)5r3 


1997 年 発刊 の 「 詳 解 HTML&JavaScript 矢 
典 ] か ら 、 ホ ー ム ペー ジ を 作成 する すべ て の 方 
に 役立つ 辞典 を 目指 し て 、 版 を 重ね て まい り ま 
し た 。 本 書 の 他 に 、 ワ ン ラ ンク 上 の 知識 を 求め 
る 方 の た め の に 以下 の 2 冊 が 好評 発売 中 で す 。 
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